input输入中文时，拼音在输入框内会触发input事件的问题。
问题描述：
监听文本输入框的input事件，在拼写汉字（输入法）但汉字并未实际填充到文本框中（选词）时会触发input事件，如图：
需求：选词完成后触发input事件，只触发一次。
解决办法：
通过查阅资料得知在输入中文（包括语音识别时）会先后触发compositionstart、compositionend事件，类似于keydown和keyup的组合。
触发compositionstart时，文本框会填入 “虚拟文本”（待确认文本），同时触发input事件；在触发compositionend时，就是填入实际内容后（已确认文本）。
先看看 compositionstart 的描述 和 compositionend 的 描述
compositionstart 事件触发于一段文字的输入之前（类似于 keydown 事件，但是该事件仅在若干可见字符的输入之前，而这些可见字符的输入可能需要一连串的键盘操作、语音识别或者点击输入法的备选词）。
compositionend 当文本段落的组织已经完成或取消时，会触发该事件。
个人理解：
compositionstart 在输入一段需要确认的文本如拼音to汉字、语音时会触发
compositionend 在拼音选词完成、语音输入完毕时会触发
至此，思路get： 声明一个标记flag，在compositionstart、compositionend两个事件过程之间的时候flag值为false，在input事件中通过flag的值来判断当前输入的状态。
OK，接下来贴出示例代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
<title></title>
</head>
<body>
<input id="txt" type="text">
<script>
var flag = true;
$('#txt').on('compositionstart',function(){
flag = false;
})
$('#txt').on('compositionend',function(){
flag = true;
})
$('#txt').on('input',function(){
var _this = this;
setTimeout(function(){
if(flag){
console.log($(_this).val());
}
},)
})
</script>
</body>
</html>
效果图：
tips：
为什么使用延时器？
因为选词结束的时候input会比compositionend先一步触发，此时flag还未调整为true，所以不能触发到console，故用setTimeout将其优先级滞后。
input输入中文时，拼音在输入框内会触发input事件的问题。的更多相关文章
- input、textarea等输入框输入中文时，拼音在输入框内会触发input事件的问题
监听文本输入框的input事件,在拼写汉字(输入法)但汉字并未实际填充到文本框中(选词)时会触发input事件,如图: 但是在很多情况下,只需要输入到输入框的中文字符. 解决办法: 通过查阅资料得知在 ...
- 解决oninput在输入中文时，会获取拼音的问题
(1)起因:在今天做项目测试的时候发现的问题,在用微软自带的输入法的时候,输入中文,文本框会获得拼音 如图所示: (2)解决办法:经过一段时间的百度查找,最后通过这篇文章找到了解决的方法,这里给出网址 ...
- IDEA下搜狗输入法输入中文时卡着不动的参考解决方法
在IntelliJ IDEA工具的java编辑窗口,给代码增加注释时发现,输入中文时,搜狗输入法界面不动,一直卡着,如图: 我想输入“根据”两个字,但搜狗输入法界面一直卡着不刷新,导致都不知道自己输 ...
- input输入框输入中文时，监听的input事件 屏蔽拼音状态
$(function () { $('#jh').off().on({ //中文输入开始 compositionstart: function () { cpLock = false; }, //中文 ...
- input在输入中文时所触发的事件（防止输入中文时重复执行）
一般在监听文本框输入时监听文本内容改变事件,可以使用oninput和onchange事件,两者区别在于oninput在文本输入状态可以一直监听变化,onchange在文本框失去焦点时才会触发,所以要想 ...
- CKEditor5 输入文字时拼音和汉字同时输入问题
在使用 CKEditor5 + vue 时,出现输入文字时,拼音和文字一起输入到编辑器到问题.与之前项目中使用 ckeditor 的区别是,这次项目是在 python 架构下局部引入 ckeditor ...
- jquery keyup 在IOS设备上输入中文时不触发
今天做一个异步查询功能的时候发现在IOS设备上查询中文时keyup没有触发,在其他设备上时可以的,后来在stackoverflow上找到下面这种解决方法,贴出来算是抛砖引玉了. $h_input.on ...
- input输入内容时放大问题
最近做的微信网站有一个关于input输入框页面放大的问题.比如登录页面刚打开时正常,但用户输入信息登录时,页面就会放大.解决这个问题,首先需要在头部加一个 <meta name="vi ...
- 【Problem solved】发现输入法都是仅桌面使用，无法输入中文时
你打开命令提示符输入CTFMON就可以啦.
随机推荐
- [js高手之路]深入浅出webpack教程系列4-插件使用之html-webpack-plugin配置(上)
还记得我们上文中的index.html文件吗? 那里面的script标签还是写死的index.bundle.js文件,那么怎么把他们变成动态的index.html文件,这个动态生成的index.htm ...
- Net分布式系统之七：日志采集系统（1）
日志对大型应用系统或者平台尤其重要,系统日志采集.分析是系统运维.维护及用户分析的基础. 一.系统日志分类 一般系统日志可分为三大类: 1.用户行为日志:通过采集系统用户使用系统过程中,一系列的操作日 ...
- 原创：LNMP架构部署个人博客网站 禁止转载复制
nginx编译安装步骤 ①. 检查软件安装的系统环境 cat /etc/redhat-release uname -r ②. 安装nginx的依赖包(pcre-devel openssl-devel) ...
- NHibernate教程(5)--CRUD操作
NHibernate之旅(5):探索Insert, Update, Delete操作 2008-10-17 16:31 by 李永京, 42903 阅读, 73 评论, 收藏, 编辑 本节内容 操作 ...
- CCIE-MPLS VPN-实验手册（上卷）
看完了看完了看完了,豪爽豪爽豪爽,一个月了,写得挺棒.总共14个mpls vpn的实验,为留下学习的痕迹,原封不动献出. CCIE实验手册 (路由部分-MPLSVPN基础篇) [CCIE] JUST ...
- 201521123091 《Java程序设计》第12周学习总结
Java 第十一周总结 第十一周的作业. 目录 1.本章学习总结 2.Java Q&A 3.码云上代码提交记录及PTA实验总结 4.课后阅读 1.本章学习总结 1.1 以你喜欢的方式(思维导图 ...
- Swing-JPopupMenu弹出菜单用法-入门
弹出菜单是GUI程序中非常常见的一种控件.它通常由鼠标右击事件触发,比如在windows系统桌面上右击时,会弹出一个包含“刷新”.“属性”等菜单的弹出菜单.Swing中的弹出菜单是JPopupMenu ...
- 201521123012 《Java程序设计》第三周学习总结
一.本章学习总结 1.面对对象:(1)类 <1>属性 [1]外部类 [2]内部类 <2>方法 [1]j静态 [2]非静态 (2)对象 <1>创建对象 <2&g ...
- 201521123004 《Java程序设计》第 14 周学习总结
0. 本周课程设计发布 Java课程设计 1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多数据库相关内容. 1.思维导图如下: 2.补充: 数据库 为了实现一定目的按某种规则组织 ...
- 201521123032 《Java程序设计》第14周学习总结
0. 本周课程设计发布 Java课程设计 1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多数据库相关内容. 2. 书面作业 1. MySQL数据库基本操作 建立数据库,将自己的姓 ...