文本域长度限制

　　今儿个给表单的标签加长度限制，一路 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="width: 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来操作文本域内的值时这个事件是不会触发的”这个问题还是解决不了，还请路过的朋友留步指教。。。。

posted @ 2013-03-12 22:30  lonlie  阅读(2721)  评论(17)  编辑  收藏  举报