本文主要是介绍中文输入法导致的高频事件,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
场景:
input.addEventListener('input', (e) => {console.log(e.target.value)
});
当给一个输入框绑定了 input 事件,输入法切换到中文正在拼写的过程中也会触发 input 事件。
解决办法:
在中文拼写开始和结束的时候分别会触发 compositionstart 和 compositionend 事件,在 compositionstart 和 compositionend 之间,input 事件回调直接退出。
const input = document.querySelector('.inp');
let isComposition = false;function search() {console.log(input.value)
}input.addEventListener('input', (e) => {if (isComposition) return;search();
});// 输入法组合开始事件
input.addEventListener('compositionstart', () => {console.log('中文输入开始')isComposition = true;
});// 输入法组合结束事件
input.addEventListener('compositionend', () => {console.log('中文输入结束')isComposition = false;search();
});
Element UI 的 el-input 已经对中文输入进行了处理,所以我们不用额外去处理。
这篇关于中文输入法导致的高频事件的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!