问题描述：

监听文本输入框的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. 深入了解 Spring Cloud Config、Spring Cloud Gateway 与断路器模式

    Spring Microservices 是一个框架,它使用 Spring 框架更容易地构建和管理基于微服务的应用程序.微服务是一种架构风格,其中一个大型应用程序被构建为一组小型.独立可部署的服务.每 ...

  2. 鸿蒙HarmonyOS实战-ArkUI组件（CustomDialog）

    一.CustomDialog CustomDialog组件是一种自定义对话框,可以通过开发人员根据特定的要求定制内容和布局.它允许开发人员创建一个完全可定制的对话框,可以显示任何类型的内容,例如文本. ...

  3. 【代码实现】最新PyTorch机器学习与深度学习技术方法

    近年来,随着AlphaGo.无人驾驶汽车.医学影像智慧辅助诊疗.ImageNet竞赛等热点事件的发生,人工智能迎来了新一轮的发展浪潮.尤其是深度学习技术,在许多行业都取得了颠覆性的成果.另外,近年来, ...

  4. Kubernetes Pod配置：从基础到高级实战技巧

    本文深入探讨了Kubernetes Pod配置的实战技巧和常见易错点. 关注[TechLeadCloud],分享互联网架构.云服务技术的全维度知识.作者拥有10+年互联网服务架构.AI产品研发经验.团 ...

  5. 抓包整理————tcp 协议[八]

    前言 简单介绍一下tcp 协议. 正文 tcp历史: advanced research projects agency network: 1973年: tcp/ip 协议 tcpv4 协议分层后的网 ...

  6. 重新整理数据结构与算法(c#)—— 堆排序[二十一]

    前言 将下面按照从小到大排序: int[] arr = { 4, 6, 8, 5, 9 }; 这时候可以通过冒泡排序,计数排序等. 但是一但数据arr很大,那么会产生排序过于缓慢,堆排序就是一个很好的 ...

  7. Effective Python：第1条　查询自己使用的Python版本

    命令行: python --version:通常可查看python2的版本: python3 --version:通常可查看python3的版本: 代码: import sys print(sys.v ...

  8. Django框架——csrf跨站请求伪造、csrf校验、csrf相关装饰器、auth认证、auth认证相关模块及操作

    csrf跨站请求伪造 钓鱼网站:模仿一个正规的网站 让用户在该网站上做操作 但操作的结果会影响到用户正常的网站账户 但是其中有一些猫腻 eg:英语四六级考试需要网上先缴费 但是你会发现卡里的钱扣了但是 ...

  9. 力扣66(java)-加一（简单）

    题目: 给定一个由 整数 组成的 非空 数组所表示的非负整数,在该数的基础上加一. 最高位数字存放在数组的首位, 数组中每个元素只存储单个数字. 你可以假设除了整数 0 之外,这个整数不会以零开头. ...

  10. 第 10 章 使用pyecharts 进行数据展示

    第 10 章 使用pyecharts 进行数据展示 10.1 安装 pyecharts pyecharts 是一个用于生成 Echarts 图表的类库, Echarts 是百度开源的一个数据可视化JS ...