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