JQuery为textarea添加maxlength

      textarea默认不支持maxlength属性。

      通过JQuery的keyup事件:

 

代码
 1 <html> 
 2   <head> 
 3      <title>JQuery为textarea添加maxlength</title> 
 4      <script type="text/javascript" src="jquery-1.4.js"></script> 
 5   </head> 
 6   <body> 
 7      <textarea style="width:300px; height:60px;" maxlength="10"></textarea> 
 8   </body> 
 9 </html> 
10 <script type="text/javascript"> 
11 $(function(){ 
12     $("textarea[maxlength]").keyup(function(){ 
13         var area=$(this); 
14         var max=parseInt(area.attr("maxlength"),10);   //获取maxlength的值 
15         if(max>0){ 
16             if(area.val().length>max){                 //textarea的文本长度大于maxlength 
17                 area.val(area.val().substr(0,max));    //截断textarea的文本重新赋值             
18             } 
19         } 
20     }); 
21 }); 
22 
23 </script>
24 
25 

 

 

      如果只用keyup只能判断键盘输入的maxlength,利用鼠标的粘贴还是可以超过maxlength的限制,可以利用blur事件做判断:

 

代码
 1 $("textarea[maxlength]").blur(function(){
 2 
 3 var area=$(this);
 4         var max=parseInt(area.attr("maxlength"),10);   //获取maxlength的值
 5         if(max>0){
 6             if(area.val().length>max){                 //textarea的文本长度大于maxlength
 7                 area.val(area.val().substr(0,max));    //截断textarea的文本重新赋值             
 8             }
 9         }
10 
11 });
12 

 

 

失去焦点后截断textarea的文本。

通过blur事件判断后还是有问题,如果是粘贴后直接提交而没有做对textarea的长度验证的情况下,还是会把textarea的全部内容提交。

posted @ 2010-04-06 22:41  Asharp  阅读(2850)  评论(1编辑  收藏  举报