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;
            }
        };
    }
原文地址:https://www.cnblogs.com/oufeng/p/6671371.html