用javascript限制输入区的中文字符个数

html部分:

<input type="text"value="限制输入10个字" id="rest" datalenght="10" datarest="rest" datamodel="ch">
<div>还可以输入<span id="output">个字</span></div>

代码思路:

1 首先提取出已经输入的字符

2用正则表达式将非中文字符过滤掉

3 将中文字符合成一个字符串,并取得字符串的长度

4 显示剩余的字符串

5 如果字符串已经超过最大长度,则取出最大长度的中文字符

具体代码如下:

var show=function () {
    var input=document.getElementById("rest");
    var l=input.getAttribute("datalenght");
    var all=input.value;
    var cll=all.match(/[\u4e00-\u9fa5]/g);//中文的长度
    cl=cll.length;
    var output=document.getElementById("output");
    var rest=l-cl;
    output.innerHTML=rest;
    if(cl>=l){
        var data=input.value;
        data=data.match(/[\u4e00-\u9fa5]/g);
        data=data.join("");
        var text=data.substr(0,10);
        input.value=text;
    }
}
var input=document.getElementById("rest");
input.onfocus=function () {
    show();
}
input.onkeyup=function () {
    show();
}
input.onblur=function () {
    show();
}