zoukankan      html  css  js  c++  java
  • textarea的maxlength属性兼容解决方案

    IE10版本的textarea才支持maxlength属性;低版本的IE都不兼容,实际上低版本的IE的市场存在率还是很高的;

    所以还是很有必要来整合一套解决方案的;

    1. Jquery版本
      $(function () {
      $('textarea[maxlength]').on('keyup blur', function(event) {
      var maxlength = $(this).attr('maxlength');
      var val = $(this).val();

      if (val.length > maxlength) {
      /*这里是为了兼容win10自带输入法在字数到达极限值之后再输入中文会清空输入框的内容*/
      $(this).hide().show();

      $(this).val(val.substr(0, maxlength));
      }
      event.stopImmediatePropagation();
      });
      })
    2. 纯js版本
      window.onload = function() {
          var txts = document.getElementsByTagName('TEXTAREA');
      
          for(var i = 0, l = txts.length; i < l; i++) {
              if(/^[0-9]+$/.test(txts[i].getAttribute("maxlength"))) {
                  var func = function() {
                      var len = parseInt(this.getAttribute("maxlength"), 10);
      
                      if(this.value.length > len) {
                          /*同上*/
                          this.style.display="none";
                          this.style.display="block";
                          
                          this.value = this.value.substr(0, len);
                          return false;
                      }
                  }
      
                  txts[i].onkeyup = func;
                  txts[i].onblur = func;
              }
          };
      }
  • 相关阅读:
    前端开发 vue,angular,react框架对比1
    前端开发 Angular
    前端开发 Vue Vue.js和Node.js的关系
    net技术
    net技术方案
    软件工程项目费用计算
    前端开发 Vue -4promise解读2
    前端开发 Vue -4promise解读1
    mybatis与hibernate区别
    struts2和springmvc的区别
  • 原文地址:https://www.cnblogs.com/oufeng/p/6671371.html
Copyright © 2011-2022 走看看