问题描述：

监听文本输入框的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. Jenkins首次启动慢

    场景描述启动Jenkins后,打开网站,发现一直卡在这个启动页面,慢,很慢,非常慢 解决方法 进入Jenkins的安装目录,找到"hudson.model.UpdateCenter.xml& ...

  2. 【Java面试指北】单例模式

    单线程下的单例模式: public class Singleton { private static Singleton instance; private Singleton() {} public ...

  3. Scrapy 基础入门

    0x01 框架概述 Scrapy 是基于 Python 的一个非常流行的网络爬虫框架,可以用来抓取 Web 站点并从页面中提取结构化的数据 (1)核心组件 引擎:用来控制整个系统的数据处理流程 调度器 ...

  4. 英语 one day

    前言 I do not know if it work,but just go. 内容 1.quote vt:摘要,引用 n:引语 He quote a passage from the presid ...

  5. mysql 必知必会整理—全球化与本地化[十六]

    前言 简单介绍一下字符集. 数据库表被用来存储和检索数据.不同的语言和字符集需要以不同的方式存储和检索. 因此,MySQL需要适应不同的字符集(不同的字母和字符),适应不同的排序和检索数据的方法. 字 ...

  6. Mac 修改版本号

    修改版本号 在安装某些软件(XCode)的过程中, 系统会提示版本低,需要升级到高版本, 而很多人不想升级而需要安装这些软件, 此时只需将版本号修改成软件安装要求的版本号就可以了. 由于SystemV ...

  7. StarRocks 集群安装

    当前按照官网上的提供的安装包方式安装,版本是 3.2.2,部署模式为存算一体,安装的操作系统是 Ubuntu 22.04,JDK 版本为 OpenJDK 11,这里选择 3 个节点进行安装,节点的 h ...

  8. JavaIDEA配置JDBC数据库连接+可视化页面

    "感谢您阅读本篇博客!如果您觉得本文对您有所帮助或启发,请不吝点赞和分享给更多的朋友.您的支持是我持续创作的动力,也欢迎留言交流,让我们一起探讨技术,共同成长!谢谢!" 0X01  ...

  9. selenium.common.exceptions.WebDriverException: Message: 'chromedriver' executable needs to be in PATH.的解决办法

    跟着视频学习python爬取网页信息,结果出现如下问题: 在网页上搜索各种资料,最终解决该问题,所以记录一下: 1.查看自己浏览器的版本号,点击"三个点--帮助--关于Google Chro ...

  10. 第 7章 Python 爬虫框架 Scrapy（上）

    第 7章 Python 爬虫框架 Scrapy(上) 编写爬虫可以看成行军打仗,基本的角色有两个:士兵和将军,士兵冲锋陷阵,而将军更多地是调兵遣将.框架就像一个将军,里面包含了爬虫的全部流程.异常处理 ...