解决input中输入中文过程中会触发input事件的问题
问题描述：
监听文本输入框的input事件，在拼写汉字时会触发input事件，如下图：
需求：
选词完成后触发input事件，只触发一次。
解决办法：
通过查阅资料得知在输入中文（包括语音识别时）会先后触发compositionstart、compositionupdate、compositionend事件。
触发compositionstart时，文本框会填入 “虚拟文本”（待确认文本），同时触发input事件；在触发compositionend时，就是填入实际内容后（已确认文本）。
mdn中composition相关事件的描述
compositionstart：文本合成系统如 input method editor（即输入法编辑器）开始新的输入合成时会触发 compositionstart 事件。
compositionend: 当文本段落的组成完成或取消时，compositionend 事件将被触发 (具有特殊字符的触发，需要一系列键和其他输入，如语音识别或移动中的字词建议)。
个人理解：
- compositionstart 在输入一段需要确认的文本如拼音->汉字/语音时会触发
- compositionend 在拼音选词完成/语音输入完毕时会触发
思路如下：
- 声明一个标记flag=false
- 在compositionstart两个事件中将flag设置为true
- 在compositionend两个事件中将flag设置为false（由于该事件晚于input事件，所有需要在该事件中执行一遍input事件所作的工作）
- 在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事件的问题的更多相关文章
- 如何在MySQL中输入中文
解决MySQL中的Incorrect string value MySQL中输入中文:在MySQL建标的时候,直接往表中的varchar(255)中输入中文的话是会报错的,大概是因为数据库的默认编码是 ...
- eclipse中输入中文为繁体
http://blog.163.com/guomaolin_gavin/blog/static/199618307201218104452930/ eclipse中输入中文为繁体! 2012-02-0 ...
- Android studio 模拟器中输入中文
Android studio 模拟器中输入中文 学习了:https://blog.csdn.net/feidie436/article/details/78318752?locationNum=10& ...
- Hive通过查询语句向表中插入数据过程中发现的坑
前言 近期在学习使用Hive(版本号0.13.1)的过程中,发现了一些坑,它们也许是Hive提倡的比关系数据库更加自由的体现(同一时候引来一些问题).也许是一些bug.总而言之,这些都须要使用Hive ...
- C#中如何截取Windows消息来触发自定义事件
原文 C#中如何截取Windows消息来触发自定义事件 在c#windows开发中,我们常常会遇到拦截windows消息,来触发某个特定任务的问题. 由于目前使用c#的开发人员非常多,而且大多数c#程 ...
- input输入框file类型第二次不触发onchange事件的解决办法，简单有效
在网上看了很多办法,现在将网上大部分说法总结如下: 网上说法: 原因:选择一次后onchange事件没有绑定到input标签上: 解决办法:拷贝一份input标签的副本,每次选择后对原input ...
- 【原创】jmeter3.0在beanshell中输入中文乱码以及字体大小的更改
我使用的是最新的jmeter3.0版本,新建一个beanshell sampler,在里面输入中文,发现显示的是乱码,而且字体非常小,看着吃力,调研了一下,可以在bin/jmeter.properti ...
- 在IOS 模拟器中 输入中文
模拟器默认的配置种没有“小地球”,只能输入英文.加入中文方法如下: 找到模拟器的Settings--->General-->Keyboard-->International KeyB ...
- 解决oninput在输入中文时，会获取拼音的问题
(1)起因:在今天做项目测试的时候发现的问题,在用微软自带的输入法的时候,输入中文,文本框会获得拼音 如图所示: (2)解决办法:经过一段时间的百度查找,最后通过这篇文章找到了解决的方法,这里给出网址 ...
- PhpStorm 2016.3 For Mac 重大里程碑更新 -- 终于解决了不能输入中文标点符号的重大bug
PhpStorm 2016.3 For Mac 重大里程碑更新 1.[终于解决了]不能输入中文标点符号的重大bug,如 逗号“,”.“.”: 2.可以在一个窗体中,同时打开多个项目: 3.其他... ...
随机推荐
- Nacos无法连接wsl2上部署的MySQL
情况描述 在部署Nacos时,需要连接MySQL数据库管理数据,但是如果连接的是wsl2上部署的MySQL,使用127.0.0.1或者localhost,通常会出现如下错误: org.springfr ...
- HarmonyOS自定义抽奖转盘开发（ArkTS）
介绍 本篇Codelab是基于画布组件.显式动画,实现的一个自定义抽奖圆形转盘.包含如下功能: 1. 通过画布组件Canvas,画出抽奖圆形转盘. 2. 通过显式动画启动抽奖功能. 3. 通 ...
- 【最简单】禁用Chrome的“请停用以开发者模式运行的扩展程序”提示
安装油猴插件后,每次打开Chrome浏览器后右上角都会提示,"请停用以开发者模式运行的扩展程序"的一个窗口,强迫症患者表示很烦. 小白的我试过网上多数方法,有些已经失效,有些都太麻 ...
- python数据库迁移
实际操作命令 1,python 文件.py db init 2,python xx.py db migrate -m '版本描述' 3,python xx.py db upgrade 4,python ...
- 深入解析Rivest Cipher 4：理论与实践
第一章:引言 密码学简介: 密码学是研究如何保护通信和信息安全的学科.它涉及加密算法.解密算法.密钥管理等内容,旨在确保信息在传输和存储过程中不被未经授权的人所获取或篡改.密码学可以分为对称加密和非对 ...
- 顺通家用电器生产工厂ERP管理系统
顺通家用电器生产工厂ERP管理系统是一款面向中小制造企业,以智能制造与精益管理为核心的一体化管理软件,符合行业特性的管理流程,与经营特征,形成行业化管理应用软件,为企业提供各方面信息化的管理应用与支持 ...
- MySQL正则表达式：REGEXP 和 LIKE
正则表达式作用: 根据指定的匹配模式匹配文中符合要求的特殊字符. REGEXP : ①操作符中常用的匹配列表: ②匹配特殊字符使用\\进行转义 \\. 能够匹配 . \\f 换页 \\n 换行 ...
- 力扣620(MySQL)-有趣的电影（简单）
题目: 某城市开了一家新的电影院,吸引了很多人过来看电影.该电影院特别注意用户体验,专门有个 LED显示板做电影推荐,上面公布着影评和相关电影描述. 作为该电影院的信息部主管,您需要编写一个 SQL查 ...
- 力扣647(java)-回文子串（中等）
题目: 给你一个字符串 s ,请你统计并返回这个字符串中 回文子串 的数目. 回文字符串 是正着读和倒过来读一样的字符串. 子字符串 是字符串中的由连续字符组成的一个序列. 具有不同开始位置或结束位置 ...
- 用了那么久的Lombok，你知道它的原理么？
简介: 在写Java代码的时候,最烦写setter/getter方法,自从有了Lombok插件不用再写那些方法之后,感觉再也回不去了,那你们是否好奇过Lombok是怎么把setter/getter方法 ...