input限制字符长度 - composition

最新推荐文章于 2023-07-19 14:21:48 发布

weixin_30693683

最新推荐文章于 2023-07-19 14:21:48 发布

阅读量977

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/jkr666666/p/11173424.html

版权

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>demo</title>
</head>
<body>
    <input id="text" placeHolder="最大支持12个字节" maxlength="12" />
    <script type="text/javascript">
     var Str = {
         byteLen : function (str){
            //正则取到中文的个数，然后len*count+原来的长度。不用replace
            str += '';
            var tmp = str.match(/[^\x00-\xff]/g) || [];
            return str.length + tmp.length;
        },
        getMaxlen : function(str,maxlen){
            var sResult = '', L=0, i=0, stop = false, sChar;
            if(str.replace(/[^\x00-\xff]/g,'xxx').length <= maxlen){
                return str;
            }
            while(!stop){
                sChar = str.charAt(i);
                L+= sChar.match(/[^\x00-\xff]/) ? 2 : 1;
                if(L > maxlen){
                    stop = true;
                }else{
                    sResult+=sChar;
                    i++;
                }
            }
            return sResult;
        }
    };
    var inputLock = false;
    document.querySelector('#text').addEventListener('compositionstart', function(){
        inputLock = true;
    })
    document.querySelector('#text').addEventListener('compositionend', function(){
        inputLock = false;
        var value = this.value,
            maxlength = this.getAttribute('maxlength');
        if(Str.byteLen(value) > maxlength){
            this.value = Str.getMaxlen(value, maxlength);
        }
    })
    document.querySelector('#text').addEventListener('input', function(){
        if(!inputLock){
            var value = this.value,
                maxlength = this.getAttribute('maxlength');
            if(Str.byteLen(value) > maxlength){
                this.value = Str.getMaxlen(value, maxlength);
            }
        }
    });
    </script>
</body>
</html>

转载于:https://www.cnblogs.com/jkr666666/p/11173424.html

weixin_30693683

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
input限制字符长度 - composition

<!DOCTYPE html><html><head><meta charset="utf-8"><title>demo</title></head><body> <input id="text" placeHolder="最大支持12个字节" maxleng...
复制链接

扫一扫