文本域长度限制

  今儿个给表单的标签加长度限制,一路 input="type" maxlength="**" 下来很顺。这时杀出个textarea,来也给你加个maxlength。

  不过textarea对我说:"哥我没这属性,您看给换个吧。。。"  没办法,(现在我使用的FireFox15.0.1、Chrome25.0.1364.160支持此属性)既然没这属性那咱就换吧,用事件来控制。

  网上查了下,用于监控文本域内容变可以用onchange、onpropertychange、oninput

  分析:

  onchange只有在失去焦点的时候才会触发,而且如果是用js方法来操作文本域内的值时,我们所做的长度限制就失效了,这个不好。

  onpropertychange在文本域的任何属性改变时都会触发,当然包括值的改变。用这个似乎可以,不过这个方法IE专用,在谷歌、火狐等浏览器无效。

  oninput适用于谷歌、火狐等标准浏览器,不过有个问题是如果用js来操作文本域内的值时这个事件是不会触发的

  综上所述,我目前能做到的做佳的是这样:  

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <title>文本域长度限制</title>
 5 </head>
 6 <body>
 7     <textarea id="areaContent" maxlength="50" style=" 400px; height: 200px;"></textarea>
 8 </body>
 9 </html>
10 <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
11 <script type="text/javascript">
12     $("#areaContent").bind("input propertychange", function (e) {
13         if ((("\v" == "v" && e.originalEvent.propertyName == "value") || "\v" != "v") && $(this).val().length > $(this).attr("maxlength")) //判断是否为IE9以下浏览器并且是value属性发生了改变
14             $(this).val($(this).val().substring(0, $(this).attr("maxlength")));
15     });
16 </script>

  但是“oninput适用于谷歌、火狐等标准浏览器,不过有个问题是如果用js来操作文本域内的值时这个事件是不会触发的”这个问题还是解决不了,还请路过的朋友留步指教。。。。

原文地址:https://www.cnblogs.com/hnlong1/p/2953600.html