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

原创 小智  2020-12-14 22:19  阅读 6,234 次

由于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;
}

input输入框限制其输入的字符数及汉字数

maxlength 属性如何设置input输入框最大字数限制

maxlength 属性规定输入字段的最大长度,以字符个数计。

如:<input type="text" maxlength="11" />

本文地址:http://aszhi.com/jishu/html/83.html
关注我们:请关注一下微信号:扫描二维码爱思智前端的微信号
版权声明:本文为原创文章,版权归 小智 所有,欢迎分享本文,转载请保留出处!

发表评论


表情