JQuery为textarea添加maxlength

textarea默认不支持maxlength属性。

 <html> 

   <head> 

     <title>JQuery为textarea添加maxlength</title> 

      <script type="text/javascript" src="jquery-1.4.js"></script> 

   </head> 

   <body> 

      <textarea style="width:300px; height:60px;" maxlength="10"></textarea> 

   </body> 

 </html> 

 <script type="text/javascript"> 

 $(function(){ 

     $("textarea[maxlength]").keyup(function(){ 

        var area=$(this); 

        var max=parseInt(area.attr("maxlength"),10);   //获取maxlength的值 

        if(max>0){ 

             if(area.val().length>max){                 //textarea的文本长度大于maxlength 

                 area.val(area.val().substr(0,max));    //截断textarea的文本重新赋值             

} 

        } 

    }); 

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

失去焦点后截断textarea的文本通过blur事件判断后还是有问题,如果是粘贴后直接提交而没有做对textarea的长度验证的情况下,还是会把textarea的全部内容提交。
 
$("textarea[maxlength]").blur(function(){

 

 var area=$(this);

         var max=parseInt(area.attr("maxlength"),10);   //获取maxlength的值

        if(max>0){

if(area.val().length>max){                 //textarea的文本长度大于maxlength

                area.val(area.val().substr(0,max));    //截断textarea的文本重新赋值             

            }

        }



 });
 
   
</script>

 

你可能感兴趣的:(textarea)