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的全部内容提交。