200字范文,内容丰富有趣,生活中的好帮手!
200字范文 > 限制textarea的输入字数

限制textarea的输入字数

时间:2018-10-18 14:36:26

相关推荐

限制textarea的输入字数

今天接到任务的第一个需求是限制字数,查看了一下之前人留下来的代码,使用的是textarea,于是就想当然的用了maxlength,结果发现无用。查阅得知,原来textarea对于maxlength的支持要到ie10了,客户偏偏要求开发环境是ie8。。。只好重新寻找方法。

这里的需求难点主要是不单单对于键盘输入需要限制,同时对于复制粘贴也要限制。最好的方法就是在用户超过限制的时候,弹出弹框,并强制取范围内的输入字符。这样能够较好的实现前端的用户要求,对于以后的数据库处理也比较方便。

原本想的是用key相关方法来检测,具体方法写法很简单:

1<script>2 function LimitTextArea(field) {3 maxlimit = 4000;4 if (field.value.length > maxlimit) {5 field.value = field.value.substring(0, maxlimit);6 alert("字数不得多于4000!");7 }8 }9</script>

1 <textarea id="mqOne" name="mqOne" cols="10" rows="5" style="width: 200px" onKeyDown="LimitTextArea(this)" onKeyUp="LimitTextArea(this)" οnkeypress="LimitTextArea(this)"></textarea>

但是事实证明这个方法对于鼠标操作无法检测,对于ctrl+v倒是可以。最后采用的是onpropertychange方法:

<textarea id="mqOne" name="mqOne" cols="10" rows="5" style="width: 200px" onpropertychange="LimitTextArea(this)"></textarea>

可是这也是IE专有的方法,FF之类的可以使用oninput的方法,使用方法同样:

<textarea id="mqOne" name="mqOne" cols="10" rows="5" style="width: 200px" οninput="LimitTextArea(this)"></textarea>

如果使用了浏览器检测可以分开,如果没有可以把两个属性写在一起同时使用,暂时没发现什么问题。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。