想实现输入框中最多只能输入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个字节。