问题描述：

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

需求：

选词完成后触发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>

输出截图

解决input中输入中文过程中会触发input事件的问题的更多相关文章

  1. 如何在MySQL中输入中文

    解决MySQL中的Incorrect string value MySQL中输入中文:在MySQL建标的时候,直接往表中的varchar(255)中输入中文的话是会报错的,大概是因为数据库的默认编码是 ...

  2. eclipse中输入中文为繁体

    http://blog.163.com/guomaolin_gavin/blog/static/199618307201218104452930/ eclipse中输入中文为繁体! 2012-02-0 ...

  3. Android studio 模拟器中输入中文

    Android studio 模拟器中输入中文 学习了:https://blog.csdn.net/feidie436/article/details/78318752?locationNum=10& ...

  4. Hive通过查询语句向表中插入数据过程中发现的坑

    前言 近期在学习使用Hive(版本号0.13.1)的过程中,发现了一些坑,它们也许是Hive提倡的比关系数据库更加自由的体现(同一时候引来一些问题).也许是一些bug.总而言之,这些都须要使用Hive ...

  5. C#中如何截取Windows消息来触发自定义事件

    原文 C#中如何截取Windows消息来触发自定义事件 在c#windows开发中,我们常常会遇到拦截windows消息,来触发某个特定任务的问题. 由于目前使用c#的开发人员非常多,而且大多数c#程 ...

  6. input输入框file类型第二次不触发onchange事件的解决办法，简单有效

    在网上看了很多办法,现在将网上大部分说法总结如下: 网上说法: 原因:选择一次后onchange事件没有绑定到input标签上:    解决办法:拷贝一份input标签的副本,每次选择后对原input ...

  7. 【原创】jmeter3.0在beanshell中输入中文乱码以及字体大小的更改

    我使用的是最新的jmeter3.0版本,新建一个beanshell sampler,在里面输入中文,发现显示的是乱码,而且字体非常小,看着吃力,调研了一下,可以在bin/jmeter.properti ...

  8. 在IOS 模拟器中 输入中文

    模拟器默认的配置种没有“小地球”,只能输入英文.加入中文方法如下: 找到模拟器的Settings--->General-->Keyboard-->International KeyB ...

  9. 解决oninput在输入中文时，会获取拼音的问题

    (1)起因:在今天做项目测试的时候发现的问题,在用微软自带的输入法的时候,输入中文,文本框会获得拼音 如图所示: (2)解决办法:经过一段时间的百度查找,最后通过这篇文章找到了解决的方法,这里给出网址 ...

  10. PhpStorm 2016.3 For Mac 重大里程碑更新 -- 终于解决了不能输入中文标点符号的重大bug

    PhpStorm 2016.3 For Mac 重大里程碑更新 1.[终于解决了]不能输入中文标点符号的重大bug,如 逗号“,”.“.”: 2.可以在一个窗体中,同时打开多个项目: 3.其他... ...

随机推荐

  1. Java 数据类型详解与类型转换技巧

    Java 数据类型 Java 中的变量必须是指定的数据类型: int myNum = 5; // 整数 float myFloatNum = 5.99f; // 浮点数 char myLetter = ...

  2. C# 报错 Lc.exe已退出 代码为-1 如何解决

    完美解决方案:把项目文件夹下Properties文件夹下的licenses.licx文件删除,重新编译即可:

  3. Linux：vscode扩展无法下载，报错：Error while fetching extensions : XHR failed

    在Linux系统上下载安装好vscode以后,发现扩展里面无法下载安装,报错:Error while fetching extensions : XHR failed 解决办法:修改 hosts 文件 ...

  4. 机器学习&深度学习 操作tips

    1. 在运行程序时,报错如下: usage: run.py [-h] --model MODEL [--embedding EMBEDDING] [--word WORD] run.py: error ...

  5. 面试连环炮系列（二十️五）：RocketMQ怎么保证消息不丢失

    RocketMQ怎么保证消息不丢失? A. 从Producer的视角来看:如果消息未能正确的存储在MQ中,或者消费者未能正确的消费到这条消息,都是消息丢失. B. 从Broker的视角来看:如果消息已 ...

  6. 基于 Scriptable 从零开始美化iOS桌面（一）

    今天我为大家带来新的作品,iOS17桌面组件神器(Scriptable)原创脚本,精美作品分享!喜欢的话就点关注吧!更多脚本正在路上... * script : ONE-Progress.js * v ...

  7. js es6系列——map函数

    正文 map,必要解释就是map不是地图的意思,而是映射的意思. 这里就简单的介绍了这个map了. array.map(callback,[ thisObject]); 看下这个案例后,我们发现了就发 ...

  8. Caused by: org.gradle.api.internal.artifacts.ivyservice.DefaultLenientConfiguration$ArtifactResolveException: Could not resolve all files for configuration ':classpath'.

    前言 这个错误怎么看呢? 如果你对gradle 不是很了解的话,有一个建议,就是把异常背下来,当然是看这个:ArtifactResolveException哈. 而不是后面的详情. 正文 给我们详情是 ...

  9. 同义词查找，关键词扩展，使用腾讯Tencent AILAB的800万词向量，gensim，annoy

    最近在做一个关键词匹配系统,为了更好的效果, 添加一个关键词扩展的功能.使用Tencent AIlab的800万词向量文件. 腾讯AILAB的800万词向量下载地址:https://ai.tencen ...

  10. c#代码重构与迭代（一）——循环代码的优化

    foreach (var item in list) { Devices _Device = DevicesLogic.GetInstance().GetDevices(item.DeviceID); ...