js 计算输入框的字节数

<html>
<head>
<script language="javascript">
function  alertLength()
{
	var name = document.main.name.value;
	window.alert("输入文字:【" + name + "】");
	var length = countLength(name);	
	window.alert("字节数:" + length);
}

function countLength(str) { 
    var r = 0; 
    for (var i = 0; i < str.length; i++) { 
        var c = str.charCodeAt(i); 
        // Shift_JIS: 0x0 ~ 0x80, 0xa0 , 0xa1 ~ 0xdf , 0xfd ~ 0xff 
        // Unicode : 0x0 ~ 0x80, 0xf8f0, 0xff61 ~ 0xff9f, 0xf8f1 ~ 0xf8f3 
        if ( (c >= 0x0 && c < 0x81) || (c == 0xf8f0) || (c >= 0xff61 && c < 0xffa0) || (c >= 0xf8f1 && c < 0xf8f4)) { 
            r += 1; 
        } else { 
            r += 2; 
        } 
    } 
    return r; 
} 

</script>
</head>

<body>

<form name="main">
<input type="text" name="name">
<input type="button" onClick="alertLength()">
</form>

</body>

</html>
   原文
你可以使用 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、付费专栏及课程。

余额充值