失眠网 > 前端JS限制输入框内最大字节数的优化及bug解决方案

前端JS限制输入框内最大字节数的优化及bug解决方案

时间：2019-08-28 05:50:28

想实现输入框中最多只能输入n个字符，可以在input标签中加maxlength= "n"。

若想让输入框中最多只能输入n个字节，该如何实现呢？（假设我们定义一个中文汉字占2个字节，一个英文字母或数字占一个字节）

思路：遍历输入的字符串，求出字节数len和字符数j，字节数大于n的时候把最后一个多余字符去掉，相当于截取到了前n个字节，结束循环。

html的onchange事件在用户改变输入域的内容时执行，实时监听。

如果是angular的form表单，可以用valueChanges订阅事件。

如果是ngModel，可以用ngModelChange事件。

代码示例：输入框中最多只能输入5个字节

<input type="text" id="name" onchange="maxLength()">

function maxLength() {var x = document.getElementById("name");var len = 0, j = 0; // len为字节数，j为字符数for (var i = 0; i < x.value.length; i++) {if (x.value.charCodeAt(i) > 127 || x.value.charCodeAt(i) == 94) {len += 2;j++;} else {len++;j++;}if (len > 5) { x.value = x.value.substring(0, j - 1); break; }}return x.value;}

代码优化：之前还写了一句else if (len == 5) { x.value = x.value.substring(0, j) }，后来发现可以省略。因为等于5的时候可以不用处理。等字节数len=n+1或n+2的时候就能判断出来。

可能的bug：用angular的form表单时，用valueChanges订阅事件可能会死循环，处理完的值，被监听到变化了又重新进入循环。

解决方案：this.form.get("name").setValue( value.substring(0, j - 1), {emitEvent: false});

补充知识：

字节（Byte）是一种计量单位，表示数据量多少，它是计算机信息技术用于计量存储容量的一种计量单位。

字符是指计算机中使用的文字和符号，比如1、2、3、A、B、C、~！·#￥%……—*（）——+、等等。

不同编码里，字符和字节的对应关系不同：

①ASCII码中，一个英文字母（不分大小写）占一个字节的空间，一个中文汉字占两个字节的空间。一个二进制数字序列，在计算机中作为一个数字单元，一般为8位二进制数，换算为十进制。最小值0，最大值255。

②UTF-8编码中，一个英文字符等于一个字节，一个中文（含繁体）等于三个字节。

③Unicode编码中，一个英文等于两个字节，一个中文（含繁体）等于两个字节。

符号：英文标点占一个字节，中文标点占两个字节。举例：英文句号“.”占1个字节的大小，中文句号“。”占2个字节的大小。

unescape(encodeURIComponent(str)).length可以unicode编码的字符串求出字节数