问题描述：

监听文本输入框的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. 基于新版宝塔Docker部署在线客服系统过程小记

    我在业余时间开发维护了一款免费开源的升讯威在线客服系统,也收获了许多用户.对我来说,只要能获得用户的认可,就是我最大的动力. 客服系统开发过程中,最让我意外的是对 TCP/IP 协议的认识.过去一直认 ...

  2. Docker 学习之道: 容器注册表及其最佳实践

    容器注册表是Docker容器镜像的集中存储和分发系统.它允许开发人员以这些镜像的形式轻松共享和部署应用程序.容器注册表在容器化应用程序的部署中发挥着关键作用,因为它们提供了一种快速.可靠和安全的方式, ...

  3. Windows wsl2安装Ubuntu

    wsl(Windows Subsystem for Linux)即适用于Windows的Linux子系统,是一个实现在Windows 10 / 11上运行原生Linux的技术. wsl2 为其迭代版本 ...

  4. Bill的挑战

    看数据范围就知道应该要状压,也不难看出应该压缩位数的状态.所以设f[i][j]为前i位,相互匹配的字符串的状态. 那么,就会有 f[i+1][j&a[i][ch]]=(f[i+1][j& ...

  5. formdata 的前世今生

    前言 为什么会产生formdata这东西呢? 看下简介: FormData 接口提供了一种表示表单数据的键值对的构造方式,经过它的数据可以使用 XMLHttpRequest.send() 方法送出,本 ...

  6. Linux systemd 定时任务

    哈喽大家好,我是咸鱼. 说到 Linux 定时任务,大家用得最多的就是 crond 服务,但其实 systemd 也有类似的功能.我们不但可以通过 systemd 来管理服务,还能设置定时任务,那就是 ...

  7. ImportError: Cannot load backend 'TkAgg' which requires the 'tk' interactive framework, as 'headless' is currently running

    MMdetection多卡训练常遇到的两个错误,百度无果,没解决,去github里mmdetection的issue模块搜索了一下找到正解. 这里记录一下,方便后者. 1️⃣ ImportError: ...

  8. Deep Learning on Graphs: A Survey第五章自动编码论文总结

    论文地址:https://arxiv.org/pdf/1812.04202.pdf 最近老师让我们读的一片论文,已经开组会讲完了,我负责的是第五章,图的自动编码,现在再总结一遍,便于后者研读.因为这篇 ...

  9. 力扣287(java&python)-寻找重复数（中等）

    题目: 给定一个包含 n + 1 个整数的数组 nums ,其数字都在 [1, n] 范围内(包括 1 和 n),可知至少存在一个重复的整数. 假设 nums 只有 一个重复的整数 ,返回 这个重复的 ...

  10. Sentinel 1.7.2 发布，完善开源生态及扩展性

    多样化的适配模块 到目前为止,Sentinel 已覆盖微服务.API Gateway 和 Service Mesh 三大板块的核心生态,同时多语言已推出 Java.C++.Go 三种语言的原生实现. ...