文章目录
1、描述
在
input
标签中,输入中文时,如若监听input
事件,会得到意想不到的结果,如下面的图所示
2、解决方案
可以用到
compositionstart
监听输入中文开始的事件,compositionend
监听输入中文结束的事件
html
<input type="text" id="abc" autocomplete="off">
<script>
let inputEl = document.querySelector('#abc')
let isChinese = false;
inputEl.addEventListener('input', (e) => {
if (!isChinese) {
handleSearch()
}
})
inputEl.addEventListener('compositionstart', (e) => {
isChinese = true
console.log('开始输入中文');
})
inputEl.addEventListener('compositionend', (e) => {
isChinese = false
console.log('结束输入中文');
handleSearch()
})
function handleSearch() {
console.log(`搜索 ${inputEl.value}`);
}
</script>