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

    问题描述：

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

    image.png

    需求：

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

    解决办法：

    通过查阅资料得知在输入中文（包括语音识别时）会先后触发compositionstart、compositionupdate、compositionend事件。

    触发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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36

    输出截图

    image.png

  • 相关阅读:
    Linux发散小知识
    [NCTF2019]Fake XML cookbook XML注入
    翁凯C语言之结构体复习
    C++入门、STL学习、二级C++等
    Git - 命令的操作规范
    第5讲：Python运算符的优先级以及结核性
    Mysql协议分析之slave注册实战（Java版）
    告诉你怎么让网站内容快速收录的技巧
    Ae 效果：CC Cross Blur
    蓝桥杯-缩位求和
  • 原文地址：https://blog.csdn.net/u014752296/article/details/127411928