中文输入法导致的高频事件

huangpb06242024-05-02 20:52

场景：

javascript 复制代码

input.addEventListener('input', (e) => {
  console.log(e.target.value)
});

当给一个输入框绑定了 input 事件，输入法切换到中文正在拼写的过程中也会触发 input 事件。

解决办法：

在中文拼写开始和结束的时候分别会触发 compositionstart 和 compositionend 事件，在 compositionstart 和 compositionend 之间，input 事件回调直接退出。

javascript 复制代码

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 已经对中文输入进行了处理，所以我们不用额外去处理。