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

场景:

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

相关推荐
JosieBook21 分钟前
【SpringBoot】21-Spring Boot中Web页面抽取公共页面的完整实践
前端·spring boot·python
吃饭睡觉打豆豆嘛1 小时前
深入剖析 Promise 实现:从原理到手写完整实现
前端·javascript
前端端1 小时前
claude code 原理分析
前端
GalaxyMeteor1 小时前
Elpis 开发框架搭建第二期 - Webpack5 实现工程化建设
前端
Spider_Man1 小时前
从 “不会迭代” 到 “面试加分”:JS 迭代器现场教学
前端·javascript·面试
我的写法有点潮1 小时前
最全Scss语法,赶紧收藏起来吧
前端·css
小高0071 小时前
🧙‍♂️ 老司机私藏清单:从“记事本”到“旗舰 IDE”,我只装了这 12 个插件
前端·javascript·vue.js
Mo_jon1 小时前
css 遮盖滚动条,鼠标移上显示
前端·css
EveryPossible2 小时前
终止异步操作
前端·javascript·vue.js
Stringzhua2 小时前
setup函数相关【3】
前端·javascript·vue.js