input输⼊框限制20个字符，⼗个汉字
英⽂和数字为⼀个字符，汉字为两个字符
在 Web 开发中，经常要对表单元素的输⼊进⾏限制，⽐如说不允许输⼊特殊字符，标点。通常我们会监听 input 事件:
inputElement.addEventListener('input', function(event) {
let regex = /[^1-9a-zA-Z]/g;
event.target.value = event.place(regex, '');
});
这段代码在 Android 上是没有问题的，但是在 iOS 中，input 事件会截断⾮直接输⼊，什么是⾮直接输⼊呢，在我们输⼊汉字的时候，⽐如说「喜茶」，中间过程中会输⼊拼⾳，每次输⼊⼀个字母都会触发 input 事件，然⽽在没有点选候选字或者点击「选定」按钮前，都属于⾮直接输⼊。
这显然不是我们想要的结果，我们希望在直接输⼊之后才触发 input 事件，这就需要引出我要说的两个事件
—— compositionstart和compositionend。
compositionstart事件在⽤户开始进⾏⾮直接输⼊的时候触发，⽽在⾮直接输⼊结束，也即⽤户点选候选词或者点击「选定」按钮之后，会触发compositionend事件。
var inputLock = false;
function do(inputElement) {
var regex = /[^1-9a-zA-Z]/g;
inputElement.value = place(regex, '');
}
inputElement.addEventListener('compositionstart', function() {
inputLock = true;
});
inputElement.addEventListener('compositionend', function(event) {
inputLock = false;input框禁止输入
do(event.target);
})
inputElement.addEventListener('input', function(event) {
if (!inputLock) {
do(event.target);
}
});
添加⼀个 inputLock 变量，当⽤户未完成直接输⼊前，inputLock 为 true，不触发 input 事件中的逻辑，当⽤户完成有效输⼊之
后，inputLock 设置为 false，触发 input 事件的逻辑。这⾥需要注意的⼀点是，compositionend 事件是在 input 事件后触发的，所以在compositionend事件触发时，也要调⽤ input 事件处理逻辑。
对于input输⼊框限制20个字符，⼗个汉字
根据这个原理，我们可以这样实现
var inputLock = false;
var ElementById("device_name_input");
Item("deviceName")){
deviceName.setAttribute("value",Item("deviceName"));
}
//中⽂输⼊开始
deviceName.addEventListener('compositionstart', function() {
inputLock = true;
});
//中⽂输⼊结束
deviceName.addEventListener('compositionend', function(event) {
inputLock = false;
limitWords()
});
//计算输⼊字符的总数
function limitWords() {
var ChiLength=0;//中⽂汉字数
var maxLength=0;
function strlen(str){
var newDeviceNameVal;
var len = 0;
ChiLength=0;//中⽂汉字数
for (var i=0; i<str.length; i++) {
var c = str.charCodeAt(i);
var one = (c >= 0x0001 && c <= 0x007e) || (0xff60<=c && c<=0xff9f);
//单字节加1
if (one&&len<=20) {
len++;
maxLength++;
} else if(len<20) {
len+=2;
ChiLength++;
maxLength++;
}
}
return len;
}
var deviceNameVal=event.currentTarget.value;
var ElementById("device_name_input");    var strLength=strlen(deviceNameVal);
//根据字符串中的汉字数，截取最终显⽰的字符
deviceNameInput.value=event.currentTarget.value.substring(0,20-ChiLength);    if(strLength>=20){
var newMaxLength=maxLength;
deviceNameInput.setAttribute("maxlength",newMaxLength);
}else{
deviceNameInput.setAttribute("maxlength",20);
}
}
deviceName.addEventListener("input",function(event){
if (!inputLock) {
limitWords()
}
})

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。