JavaScript控制input标签输入框限制字符数及汉字数_HTML+CSSJavaScript

由于input标签需要对输入字数长度做下限制。本文主要介绍使用 javascript 控制 HTML 之 input 输入框的内容和长度，并限制其输入的字符数及汉字数超过长度时的解决方法。

通过 javascript限制input输入框字符数及汉字数

HTML 页面代码

//20为限制的字符数，相当于2倍的汉字数
<input type="text" id="namerid" name="name"  oninput="checkField(this.value,20,'namerid')"  />

JavaScript 代码

function checkField(value, byteLength, attribute) {
    // value是input框的值,byteLength是需求限制的字符，attribute是input的id名
    var newvalue = value.replace(/[^\x00-\xff]/g, "**");
    var length = newvalue.length;
    //当填写的字节数小于设置的字节数
    if (length * 1 <= byteLength * 1) {
        return;
    }
    var limitDate = newvalue.substr(0, byteLength);
    var count = 0;
    var limitvalue = "";
    for (var i = 0; i < limitDate.length; i++) {
        var flat = limitDate.substr(i, 1);
        if (flat == "*") {
           count++;
        }
    }
    var size = 0;
    var istar = newvalue.substr(byteLength * 1 - 1, 1); //校验点是否为“×”
    //if 基点是×; 判断在基点内有×为偶数还是奇数
    if (count % 2 == 0) {
        //当为偶数时
        size = count / 2 + (byteLength * 1 - count);
        limitvalue = value.substr(0, size);
        } else {
        //当为奇数时
        size = (count - 1) / 2 + (byteLength * 1 - count);
        limitvalue = value.substr(0, size);
    }
    alert("最大输入" + byteLength + "个字节（相当于" + byteLength / 2 + "个汉字）！");
    document.getElementById(attribute).value = limitvalue;
    return;
}