您的位置:首页 > Web前端 > JavaScript

js限制textarea内容长度

2014-11-19 09:34 246 查看
js限制textarea内容长度

全文转载自 http://hi.baidu.com/java_workplace/blog/item/03e2910be2003921e824887f.html
感谢作者

文本框有一个为maxlength的属性,可以限制文本框的长度,而备注框textarea却没有,需要在按键时判断长度,也就是加这样一句话:onKeyDown='if (this.value.length>=20){event.returnValue=false}'

但是这样还有一个问题,就是当长度达到20时,所有的按键都不好用了,但我们需要backspace好使,那么就要判断按键是什么,加上:if(event.keyCode != 8),

完整的用法为:

<textarea id="memo" name="memo" rows="5" cols="70" onKeyDown='if (this.value.length>=200){if(event.keyCode != 8)event.returnValue=false;}'>memo</textarea>

它的原理是通过对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>

  样式:

  当然,为了更为保险,处理表单数据的后台脚本程序还应该对提交来的数据进行再一次的检测,如果字数超出预设的数量则进行相应处理,这样才达到真正限制字数的目的。.
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: