使用JavaScript限制TextArea多行文本域的可输入篇幅
日期：2014-05-16 浏览次数：20579 次
使用JavaScript限制TextArea多行文本域的可输入字数
1.背景
在开发中遇到一个html的知识，大致需求是这样的：用户信息页面有一栏是用户备注，数据库设计可以存500个字。由于发布时没有把这个TextArea的可输入字数限制住，导致用户在输入超过500个字时程序抛异常，提示操作的数据太大。出了问题不怕，找到问题出现的症结对症下药就能迎刃而解。
2.相关知识点
1.html 输入元素可输入字符控制。
2.使用Javascript对TextArea的输入字数进行动态控制。
3.正文
大家知道，对于普通的文本框，比如<input type="text" name="userName"/>,对于这种的type=“text”的，给相应元素设置一个属性（maxLength=x）即可。第二种实现方式是在表单提交时使用正则表达式进行验证，判断TextArea 的字数是否超出相应的限额，这也算一种方法，不过给人的感觉不好，因为用户在输入的时候并不知道自己还能输入几个字。正是有了这个需求才有了本文，下面结合代码说明如何实现友好的提示。闲言少叙，上代码：
页面运行截图：
，作为笔记记录以防备忘，也希望能帮到各位同样需求的朋友。html源码可以直接复制或者下载附件。
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这个属性，如下图：页面运行截图：
，作为笔记记录以防备忘，也希望能帮到各位同样需求的朋友。html源码可以直接复制或者下载附件。
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
