<!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>
