想实现输入框中最多只能输入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编码的字符串求出字节数

④UTF-16编码中，一个英文字母字符或一个汉字字符存储都需要2个字节（Unicode扩展区的一些汉字存储需要4个字节）。

⑤UTF-32编码中，世界上任何字符的存储都需要4个字节。