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

场景:

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

相关推荐
脑袋大大的6 分钟前
判断当前是否为钉钉环境
开发语言·前端·javascript·钉钉·企业应用开发
军军君0115 分钟前
基于Springboot+UniApp+Ai实现模拟面试小工具二:后端项目搭建
前端·javascript·spring boot·spring·微信小程序·前端框架·集成学习
quweiie1 小时前
tp8.0\jwt接口安全验证
前端·安全·jwt·thinkphp
xiaoyan20151 小时前
最新Flutter3.32+Dart3仿微信App聊天实例
前端·flutter·dart
汪敏wangmin1 小时前
Fiddler-抓包后直接生成Loadrunner脚本或者Jmeter脚本
前端·jmeter·fiddler
彤银浦2 小时前
Web学习笔记3
前端·笔记·学习·html5
江城开朗的豌豆2 小时前
退出登录后头像还在?这个缓存问题坑过多少前端!
前端·javascript·vue.js
江城开朗的豌豆2 小时前
Vue的'读心术':它怎么知道数据偷偷变了?
前端·javascript·vue.js
江城开朗的豌豆3 小时前
手把手教你造一个自己的v-model:原来双向绑定这么简单!
前端·javascript·vue.js
我在北京coding3 小时前
el-tree 懒加载 loadNode
前端·vue.js·elementui