js限制input输入的最大字节

项目中遇到的问题是要求输入的最大字节是10个,但是input自带的maxlength不能实现,正则表达式也不好实现,所以看到别人的一种写法,感觉很好用,所以记录下来

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <script>
function WidthCheck(str, maxLen){ 
    var w = 0; 
    var tempCount = 0; 
    //length 获取字数数,不区分汉子和英文 
    for (var i=0; i<str.value.length; i++) { 
        //charCodeAt()获取字符串中某一个字符的编码 
        var c = str.value.charCodeAt(i); 
        console.log(c);
        //单字节加1 
        if ((c >= 0x0001 && c <= 0x007e) || (0xff60<=c && c<=0xff9f)) { 
            w++; 
        } else { 
            w+=2; 
        } 
        if (w > maxLen) { 
            str.value = str.value.substr(0,i); 
            break; 
            alert('超过');
         } 
    } 
} 
</script> 
<input type="text" id="nickname" class="nickname" value="" onkeyup="WidthCheck(this,10);"/>
</body>
</html>

  • 2
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
你可以使用 JavaScript 的事件监听器来实现输入限制字节长度的功能。具体做法如下: 1. 在 HTML 中,给输入框添加一个事件监听器,监听输入事件(oninput): ``` <input type="text" oninput="checkLength(this)" /> ``` 2. 在 JavaScript 中,编写 checkLength 函数,该函数会在用户输入时被调用: ``` function checkLength(input) { // 获取输入框的值 var value = input.value; // 计算字节数 var byteLength = 0; for (var i = 0; i < value.length; i++) { var charCode = value.charCodeAt(i); if (charCode <= 127) { byteLength += 1; // 英文字符 } else { byteLength += 2; // 中文字符 } } // 如果字节数超过了限制,截断输入框的值 if (byteLength > 50) { input.value = truncate(value, 50); } } function truncate(str, len) { var byteLen = 0; for (var i = 0; i < str.length; i++) { var charCode = str.charCodeAt(i); if (charCode <= 127) { byteLen += 1; } else { byteLen += 2; } if (byteLen > len) { return str.substring(0, i); } } return str; } ``` 3. checkLength 函数中,先获取输入框的值,然后计算字节数。为了区分中文字符和英文字符,我们使用 charCodeAt 函数获取字符的 Unicode 编码,如果编码小于等于 127,就认为是英文字符,否则就认为是中文字符。英文字符算一个字节,中文字符算两个字节。 4. 如果字节数超过了限制,我们就使用 truncate 函数截断输入框的值。truncate 函数也是通过计算字节数来实现的。如果字节数超过了 len,就返回字符串的前 len 个字符。 这样,就可以实现输入限制字节长度的功能了。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值