文本框如何实现限制输入字数效果

在很多网站都有这样的功能,那就是可以限制在文本框内输入文字的数量,有的是让文字不超过多少字,有的是文字不能少于多少字,原理基本是一样的,下面就介绍一下如何是用JS实现此功能,代码实例如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.51texiao.cn/" />
<title>蚂蚁部落</title>
<script type="text/javascript">
window.onload=function()
{
  var textarea=document.getElementById("mytext");
  textarea.onkeyup=function()
  {
    checkMax(textarea,10);
  }     
}
function checkMax(textarea,maxLength)
{    
  var str=textarea.value;    
  var strlen=str.length;    
   
  if(strlen>maxLength)
  {    
    alert(‘字数超过限制‘);    
    eval(textarea.value=str.substr(0,maxLength));    
  }    
}    
</script>
</head>
<body style="text-align:center">
<h1>请在文本框内输入文本测试功能</h1>
<textarea name="textfield" cols="60" rows="10" id="mytext"></textarea>
</body>

</html>

以上代码实现了限制文字输入数量功能,并且可以将文本框内输入的文本截取至指定的数量。简单介绍一下实现过程:
一.功能的实现的核心是checkMax()函数,此函数具有两个参数,一个参数是要限制输入文本数量的对象,一个是要限制的数量。
二checkMax()函数体内功能介绍如下:
var str=textarea.value;
获取文本框内的输入值,同时计算出来输入值的长度。下面的if语句用来判断当前输入文本的长度是否超过了指定的限制长度,如果超过会弹出一个警告框,并且通过substr()将超出的部分截取掉。
三.window.onload=function() {...}的作用是当文档加载完成后才可以执行函数体内的代码,否则,由于代码是顺序执行,会导致 document.getElementById("mytext")无法获取对象。然后为文本框的onkeyup事件绑定事件处理函数。

时间: 2024-10-14 19:31:34

文本框如何实现限制输入字数效果的相关文章

如何禁止文本框的记忆性输入

HTML中禁止自动完成和禁用输入法收藏 IE提供了一个自动完成功能可以记忆我们的输入内容(如登录帐号等),方便下一次快速地录入类似资料.这确实是一个非常友好的功能, 在操作时只需用鼠标双击文本框或输入前几个字符, 系统会自动列出以前的录入历史供你选择, 大大提高录入速度及准确性. 相信大多数IE的用户都启用了这项功能.      然而做为网站开发者来说, 并不希望什么资料都记忆在用户的电脑上(如银行帐号和其它重要的帐号及密码), 但是我们又不能要求用户禁用自动完成的功能. 幸好IE5.0后为 I

JS复选框向一个文本框中传值的多选效果

选择一个复选框,那么这个复选框的值就传到一个文本框中,如果这个文本框里有了就不用加了,没有则加.如果取消选择,则从文本框中取掉传的值.中间以“,”分隔,最后结尾没有“,”分隔符. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns=&q

jquery ui autocomplete 实现点击文本框,出现所有查询信息效果

直接看代码 <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Autocomplete - Default functionality</title> <link rel="stylesheet" href="../../themes/base/jqu

页面有一个文本框和按钮,输入文字,点击按钮,弹出该数字是奇数还是偶数还是非法值

1 <body> 2 <textarea name="" id="txt" cols="30" rows="10" style="width: 200px;height: 200px;"></textarea><br/> 3 <button id="btn">按钮</button> 4 <script>

两个文本框,第一个输入,第二个同步显示

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Typ

自己写的 限制文本框TEdit中只能输入数字

procedure TForm4.Edit1KeyPress(Sender: TObject; var Key: Char); begin if not (Key in ['0' .. '9', '.', '-', #8, #13]) then begin Key := #0; end else begin if Key = '-' then begin if not string(TEdit(Sender).Text).Contains('-') then begin //光标定位在第一个上

监听文本框输入开发仿新浪微博限制输入字数的textarea插件

监听文本框输入 Firefox.Chrome.IE9,IE10 均支持 oninput 事件,此外所有版本的 IE 均支持 onpropertychange 事件. oninput 事件在用户输入.退格(backspace).删除(delete).剪切(ctrl + x).粘贴(ctrl + v)及鼠标剪切与粘贴时触发(在 IE9 中只在输入.粘贴.鼠标粘贴时触发). onpropertychange 事件在用户输入.退格(backspace).删除(delete).剪切(ctrl + x).粘

限定文本框只能输入数字实例代码

限定文本框只能输入数字实例代码:有时候文本框中可以输入的内容只能够限定为数字,比如邮编和电话号码等.实现此中效果的方法有多种,比较常用的比如有正则表达式方式,不过这里咱们不采用这个,下面介绍一下如何通过keyCode属性值实现此效果.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content=&

html中radio单选和文本框限制只能输入数字的解决方案

一.当html中存在多个radio单选按钮时将所有的单选按钮name属性设置为一样,就可实现每次只选中一个的效果. 二.限制文本框只能输入数字,代码如下: $(function(){ $(":radio.dian").click(function(){ //单击radio后移除所有的边框样式 $("label").removeClass("bank_border"); if(this.checked){//当radio选中时设置边框样式 $(th