使用JavaScript限制TextArea多行文本域的可输入字数

yelangking

浏览: 21421 次
性别:
来自: 南京

最近访客更多访客>>

am540

Hipster

suncong1024

fmbobin

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

1.背景
       在开发中遇到一个html的知识，大致需求是这样的：用户信息页面有一栏是用户备注，数据库设计可以存500个字。由于发布时没有把这个TextArea的可输入字数限制住，导致用户在输入超过500个字时程序抛异常，提示操作的数据太大。出了问题不怕，找到问题出现的症结对症下药就能迎刃而解。
2.相关知识点
      1.html 输入元素可输入字符控制。
       2.使用Javascript对TextArea的输入字数进行动态控制。
3.正文
      大家知道，对于普通的文本框，比如<input type="text" name="userName"/>,对于这种的type=“text”的，给相应元素设置一个属性（maxLength=x）即可。第二种实现方式是在表单提交时使用正则表达式进行验证，判断TextArea 的字数是否超出相应的限额，这也算一种方法，不过给人的感觉不好，因为用户在输入的时候并不知道自己还能输入几个字。正是有了这个需求才有了本文，下面结合代码说明如何实现友好的提示。闲言少叙，上代码：

<html>  
   <head>  
   <title>JS限制Textarea文本域字符个数</title>  
   <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
   <SCRIPT LANGUAGE="JavaScript">  
   <!--//  
   function textCounter(field, countfield, maxlimit) {  
   // 函数，3个参数，表单名字，表单域元素名，限制字符；  
   if (field.value.length > maxlimit)  
   //如果元素区字符数大于最大字符数，按照最大字符数截断；  
   field.value = field.value.substring(0, maxlimit);  
   else  
   //在记数区文本框内显示剩余的字符数；  
   countfield.value = maxlimit - field.value.length;  
   }  
   //-->  
   </SCRIPT>  
   </head>  
   <body>  
    <form name=myform action="">  
        <textarea name="message" cols="28" rows="5" onKeyDown="textCounter(message,remLen,6);" onKeyUp="textCounter(message,remLen,6);"></textarea>  
        您还可以输入:<input name="remLen" type="text" value="6" size="5" readonly="readonly">个字符  
    </form>  
   </body>  
   </html>

,由于功能比较简单，相信各位都能看得懂。这里边最主要的地方就是给相应的TextArea控件绑定检测函数，让用户在输入之后马上可以看到自己还能输入多少字符。据我所知，html5已经将这个考虑进去了，在html5的元素中已经有了maxlength这个属性，如下图：