bug
ios 输入中文时 会触发多次input事件
解决方法
引入两个事件compositionstart
和 compositionend
。
compositionstart
该事件在用户开始进行非直接输入的时候触发,而在非直接输入结束。
compositionend
该事件在用户 输入完成 点击候选词 或 确认按钮时 触发
var inputLock = false;
function do(inputElement) {
var regex = /[^1-9a-zA-Z]/g;
inputElement.value = inputElement.value.replace(regex, '');
}
inputElement.addEventListener('compositionstart', function() {
inputLock = true;
});
inputElement.addEventListener('compositionend', function(event) {
inputLock = false;
do(event.target);
})
inputElement.addEventListener('input', function(event) {
if (!inputLock) {
do(event.target);
event.returnValue = false;
}
});
添加一个 inputLock 变量,当用户未完成直接输入前,inputLock 为 true,不触发 input 事件中的逻辑,当用户完成有效输入之后,inputLock 设置为 false,触发 input 事件的逻辑。这里需要注意的一点是,compositionend 事件是在 input 事件后触发的,所以在 compositionend事件触发时,也要调用 input 事件处理逻辑。