textarea不能通过maxlength属性来限制字数的解决方法


Posted in Javascript onSeptember 01, 2014

textarea称文本域,又称文本区,即有滚动条的多行文本输入控件,在网页的提交表单中经常用到。与单行文本框text控件不同,它不能通过maxlength属性来限制字数,为此必须寻求其他方法来加以限制以达到预设的需求。

通常的做法就是使用#脚本语言来实现对textarea文本域的字数输入限制,简单而实用。假设我们有一个id为 txta1 的textarea文本区,我们可以通过以下代码限制它的键盘输入字数为10个字(汉字或其他小角字符):

<script language="#" type="text/ecmascript"> 
window.onload = function() 
{ 
document.getElementById('txta1').onkeydown = function() 
{ 
if(this.value.length >= 10) 
event.returnValue = false; 
} 
} 
</script>

它的原理是通过对keydown(键盘键位按下)事件对指定id号的文本区进行监测,可以想象,它只能限制键盘输入,如果用户通过鼠标右键粘贴剪切板中的文本,它无法控制字数。

通过键盘输入,以上文本区只能输入10个字。但是,我们的目的并没有达到!请随便复制一些文本,试着用鼠标右键粘贴,看看发生了什么。

你可以在网上找到类似上述的其他JS脚本,它们不管多么优秀,其原理都是一样的,通过对keydown、keyup或keypress之类的键盘键 位操作事件来监控文本区的输入,无法防止鼠标右键的粘贴,为此,如果一定要真正地限制textarea的字数,我们还得为网页加另一把锁——禁用鼠标右 键,这无疑得付出额外的开销,同时也可能是网页制作者不一定愿意做的。其实,还有一个更简单的方法,使用onpropertychange属性。

onpropertychange可以用来判断预定元素的value值,当元素的value值发生变化时判断事件就会被触发,仅关心被监测元素的 value值,避开了输入的来源,从而可以比较理想地达成我们的限制字数这一目的。它属于JS范畴,可以在表单方框区代表中嵌套使用,以下是代码和效果样 式,可以像上面那样测试输入,你会发现它真正达到目的:不管用什么方式输入,它只能输入100个字(汉字或其他小解符号):

代码:

<textarea onpropertychange="if(value.length>100) value=value.substr(0,100)" class="smallArea" cols="60" name="txta" rows="8"></textarea>

当然,为了更为保险,处理表单数据的后台脚本程序还应该对提交来的数据进行再一次的检测,如果字数超出预设的数量则进行相应处理,这样才达到真正限制字数的目的。(完)

另外一种方法实现textarea限制输入字数(包含中文只能输入10个,全ASCII码能够输入20个)

<script> 
function check() { 
var regC = /[^ -~]+/g; 
var regE = /\D+/g; 
var str = t1.value; 

if (regC.test(str)){ 
t1.value = t1.value.substr(0,10); 
} 

if(regE.test(str)){ 
t1.value = t1.value.substr(0,20); 
} 
} 
</script> 
<textarea maxlength="10" id="t1" onkeyup="check();"> 
</textarea>

还有一种方式:

function textCounter(field, maxlimit) { 
if (field.value.length > maxlimit){ 
field.value = field.value.substring(0, maxlimit); 
}else{ 
document.upbook.remLen.value = maxlimit - field.value.length; 
} 
}
<textarea name=words cols=19 rows=5 class=input1 onPropertyChange= "textCounter(upbook.words, 50) "> textarea> 
剩余字数: <input name=remLen type=text id= "remLen " style= "background-color: #D4D0C8; border: 0; color: red " value=50 size=3 maxlength=3 readonly>
function LimitTextArea(field){ 
maxlimit=200; 
if (field.value.length > maxlimit) 
field.value = field.value.substring(0, maxlimit);
}
<textarea cols=50 rows=10 name="comment" id="commentarea" onKeyDown="LimitTextArea(this)" onKeyUp="LimitTextArea(this)" onkeypress="LimitTextArea(this)" ></textarea>

title="The textarea width must less than 300 characters." 放在textarea 里面提示输入最大字节数。

例如:

<textarea title="The textarea width must less than 300 characters." cols=50 rows=10 name="comment" id="commentarea" onKeyDown="LimitTextArea(this)" onKeyUp="LimitTextArea(this)" onkeypress="LimitTextArea(this)" ></textarea>
Javascript 相关文章推荐
jQuery的实现原理的模拟代码 -2 数据部分
Aug 01 Javascript
JS对img进行操作(换图片/切图/轮换/停止)
Apr 17 Javascript
JavaScript修改css样式style动态改变元素样式
Dec 16 Javascript
JS ES6多行字符串与连接字符串的表示方法
Apr 26 Javascript
Node.js操作redis实现添加查询功能
May 25 Javascript
jquery使用iscorll实现上拉、下拉加载刷新
Oct 26 jQuery
vue.js实现的幻灯片功能示例
Jan 18 Javascript
小程序实现悬浮搜索框
Jul 12 Javascript
js中forEach,for in,for of循环的用法示例小结
Mar 14 Javascript
node.js +mongdb实现登录功能
Jun 18 Javascript
JavaScript 实现拖拽效果组件功能(兼容移动端)
Nov 11 Javascript
JavaScript原型链中函数和对象的理解
Jun 16 Javascript
超级好用的jQuery圆角插件 Corner速成
Aug 31 #Javascript
Html5的placeholder属性(IE兼容)实现代码
Aug 30 #Javascript
通过js为元素添加多项样式,浏览器全兼容写法
Aug 30 #Javascript
原生js仿jq判断当前浏览器是否为ie,精确到ie6~8
Aug 30 #Javascript
原生js实现复制对象、扩展对象 类似jquery中的extend()方法
Aug 30 #Javascript
ZeroClipboard插件实现多浏览器复制功能(支持firefox、chrome、ie6)
Aug 30 #Javascript
仿百度联盟对联广告实现代码
Aug 30 #Javascript
You might like
php创建桌面快捷方式实现方法
2015/12/31 PHP
YII Framework框架教程之缓存用法详解
2016/03/14 PHP
laravel中的一些简单实用功能
2018/11/03 PHP
jQuery find和children方法使用
2011/01/31 Javascript
jquery模拟按下回车实现代码
2011/09/20 Javascript
到处都是jQuery选择器的年代 不了解它们的性能,行吗
2012/06/18 Javascript
JS无限极树形菜单,json格式、数组格式通用示例
2013/07/30 Javascript
Extjs4中tree的拖拽功能(可以两棵树之间拖拽) 简单实例
2013/12/08 Javascript
button没写type=button会导致点击时提交
2014/03/06 Javascript
Firefox下无法正常显示年份的解决方法
2014/09/04 Javascript
每天一篇javascript学习小结(基础知识)
2015/11/10 Javascript
js对字符串进行编码的方法总结(推荐)
2016/11/10 Javascript
textarea 在浏览器中固定大小和禁止拖动的实现方法
2016/12/03 Javascript
BootStrap的两种模态框方式
2017/05/10 Javascript
vue-quill-editor实现图片上传功能
2017/08/08 Javascript
JS实现点击li标签弹出对应的索引功能【案例】
2019/02/18 Javascript
Selenium执行Javascript脚本参数及返回值过程详解
2020/04/01 Javascript
详解微信小程序工程化探索之webpack实战
2020/04/20 Javascript
JavaScript如何使用插值实现图像渐变
2020/06/28 Javascript
vue自定义指令限制输入框输入值的步骤与完整代码
2020/08/30 Javascript
[02:44]重置世界,颠覆未来——DOTA2 7.23版本震撼上线
2019/12/01 DOTA
python字符串排序方法
2014/08/29 Python
Python查找函数f(x)=0根的解决方法
2015/05/07 Python
python读取和保存视频文件
2018/04/16 Python
解决python中os.listdir()函数读取文件夹下文件的乱序和排序问题
2018/10/17 Python
python接口自动化如何封装获取常量的类
2019/12/24 Python
Python selenium 加载并保存QQ群成员,去除其群主、管理员信息的示例代码
2020/05/28 Python
使用PyCharm官方中文语言包汉化PyCharm
2020/11/18 Python
CSS3中各种颜色属性的使用教程
2016/05/17 HTML / CSS
荷兰皇家航空公司官方网站:KLM Royal Dutch Airlines
2017/12/07 全球购物
《长城》教学反思
2014/02/14 职场文书
2015年党风廉政承诺书
2015/01/22 职场文书
Python使用openpyxl批量处理数据
2021/06/23 Python
mysql脏页是什么
2021/07/26 MySQL
MySQL 数据表操作
2022/05/04 MySQL
详解MongoDB排序时内存大小限制与创建索引的注意事项
2022/05/06 MongoDB