码迷,mamicode.com
首页 > 其他好文 > 详细

文本域长度限制

时间:2016-04-26 09:32:38      阅读:87      评论:0      收藏:0      [点我收藏+]

标签:

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

文本域长度限制

标签:

原文地址:http://www.cnblogs.com/shouce/p/5433624.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!