解决input中输入中文过程中会触发input事件的问题

简介: 解决input中输入中文过程中会触发input事件的问题

问题描述:

监听文本输入框的input事件,在拼写汉字时会触发input事件,如下图:

需求:

选词完成后触发input事件,只触发一次。

解决办法:

通过查阅资料得知在输入中文(包括语音识别时)会先后触发compositionstartcompositionupdatecompositionend事件。

触发compositionstart时,文本框会填入 “虚拟文本”(待确认文本),同时触发input事件;在触发compositionend时,就是填入实际内容后(已确认文本)。

mdn中composition相关事件的描述

compositionstart:文本合成系统如 input method editor(即输入法编辑器)开始新的输入合成时会触发 compositionstart 事件。

compositionend: 当文本段落的组成完成或取消时,compositionend 事件将被触发 (具有特殊字符的触发,需要一系列键和其他输入,如语音识别或移动中的字词建议)。

个人理解:

  • compositionstart 在输入一段需要确认的文本如拼音->汉字/语音时会触发
  • compositionend 在拼音选词完成/语音输入完毕时会触发

思路如下:

  1. 声明一个标记flag=false
  2. 在compositionstart两个事件中将flag设置为true
  3. 在compositionend两个事件中将flag设置为false(由于该事件晚于input事件,所有需要在该事件中执行一遍input事件所作的工作)
  4. 在input事件中通过flag的值来判断当前输入的状态

完整代码

<!DOCTYPE html>
<html lang="zh">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Input</title>
</head>
<body>
   <input id="text" type="text" style="width: 400px;height: 40px;">
</body>
<script>
   let flag = false
   const textEle = document.querySelector("#text");
   const search = (val)=>{
    console.log(val)
   }
   textEle.addEventListener('input', ev=>{
    if(!flag){
      search(ev.target.value)
    }
   })
   textEle.addEventListener('compositionstart', (ev)=>{
    flag = true;
    console.log('start:', ev.target.value)
   })
   textEle.addEventListener('compositionupdate', (ev)=>{
    console.log('update:', ev.target.value)
   })
   textEle.addEventListener('compositionend', (ev)=>{
    flag = false;
    console.log('end:', ev.target.value)
   })
</script>
</html>

输出截图


相关文章
|
7月前
|
存储 JavaScript 前端开发
好烦,怎么输入拼音的过程也会触发input事件!!!
好烦,怎么输入拼音的过程也会触发input事件!!!
186 0
|
7月前
input点击后placeholder中的提示消息消失
input点击后placeholder中的提示消息消失
Input 标签监听内容输入(change、input 事件区别)
Input 标签监听内容输入(change、input 事件区别)
185 0
input中placeholder的鼠标操作事件
input中placeholder的鼠标操作事件
74 0
|
7月前
element-plus 循环生成的多个input输入框如何校验
我们知道正常写出来的input输入框如何校验,那循环出来的输入框应该怎么校验咧,这里就教大家如何的去校验通过循环出来的输入框。
308 0
|
JavaScript 程序员
input框输入中文时,输入未完成触发事件。Vue中文输入法不触发input事件?
input框输入中文时,输入未完成触发事件。Vue中文输入法不触发input事件?
570 1
element中el-radio无法切换点击和input框无法输入的问题(整理)
element中el-radio无法切换点击和input框无法输入的问题(整理)
|
JavaScript
VUE element-ui之form表单中input输入超过规定长度error提醒,并实时显示输入长度,可无限输入
输入超过规定长度error提醒,并实时显示输入长度,可无限输入
1050 0
VUE element-ui之form表单中input输入超过规定长度error提醒,并实时显示输入长度,可无限输入