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

场景:

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

相关推荐
社恐的下水道蟑螂3 分钟前
用 n8n 打造 AI 科技新闻速览工作流:自动化获取、总结,每天高效充电
前端
陈随易10 分钟前
PaddleOCR-VL可太强了,图片识别转文字的巅峰之作
前端·后端·程序员
盗德11 分钟前
紧急项目下,前端是“先乱炖”还是“慢火煲汤”?我选第三条路
前端·程序员
zmirror13 分钟前
Monorepo单仓多包&独立部署
前端
Linsk13 分钟前
为什么BigInt无法通过Babel降级?
前端·typescript·前端工程化
colorFocus14 分钟前
都25年了,快用?.替代&&,??替代||
javascript
Asort14 分钟前
JavaScript设计模式(十八)——备忘录模式:状态保存与恢复的艺术
前端·javascript·设计模式
社恐的下水道蟑螂18 分钟前
一文吃透 JS 对象字面量:从基础用法到代理模式实践
javascript
over69719 分钟前
AI科技新闻速览自动化:使用n8n工作流打造个人AI助手
前端