zoukankan      html  css  js  c++  java
  • 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="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>
     
  • 相关阅读:
    CF1375E Solution
    牛客暑期营2K Solution
    牛客暑期营1F Solution
    redux的使用
    react-routerV6.0的使用
    react配置emotion
    react项目中配置antd
    使用npx创建react+typescript项目
    【5】Redis从入门到放弃---秒杀案例(Redis的事务+锁机制+lua脚本)
    【四】Redis从入门到放弃---RedisTemplate操作Redis
  • 原文地址:https://www.cnblogs.com/akingyao/p/2671309.html
Copyright © 2011-2022 走看看