问题描述：

　　监听文本输入框的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事件的问题。的更多相关文章

  1. input、textarea等输入框输入中文时，拼音在输入框内会触发input事件的问题

    监听文本输入框的input事件,在拼写汉字(输入法)但汉字并未实际填充到文本框中(选词)时会触发input事件,如图: 但是在很多情况下,只需要输入到输入框的中文字符. 解决办法: 通过查阅资料得知在 ...

  2. 解决oninput在输入中文时，会获取拼音的问题

    (1)起因:在今天做项目测试的时候发现的问题,在用微软自带的输入法的时候,输入中文,文本框会获得拼音 如图所示: (2)解决办法:经过一段时间的百度查找,最后通过这篇文章找到了解决的方法,这里给出网址 ...

  3. IDEA下搜狗输入法输入中文时卡着不动的参考解决方法

    在IntelliJ IDEA工具的java编辑窗口,给代码增加注释时发现,输入中文时,搜狗输入法界面不动,一直卡着,如图:  我想输入“根据”两个字,但搜狗输入法界面一直卡着不刷新,导致都不知道自己输 ...

  4. input输入框输入中文时，监听的input事件 屏蔽拼音状态

    $(function () { $('#jh').off().on({ //中文输入开始 compositionstart: function () { cpLock = false; }, //中文 ...

  5. input在输入中文时所触发的事件（防止输入中文时重复执行）

    一般在监听文本框输入时监听文本内容改变事件,可以使用oninput和onchange事件,两者区别在于oninput在文本输入状态可以一直监听变化,onchange在文本框失去焦点时才会触发,所以要想 ...

  6. CKEditor5 输入文字时拼音和汉字同时输入问题

    在使用 CKEditor5 + vue 时,出现输入文字时,拼音和文字一起输入到编辑器到问题.与之前项目中使用 ckeditor 的区别是,这次项目是在 python 架构下局部引入 ckeditor ...

  7. jquery keyup 在IOS设备上输入中文时不触发

    今天做一个异步查询功能的时候发现在IOS设备上查询中文时keyup没有触发,在其他设备上时可以的,后来在stackoverflow上找到下面这种解决方法,贴出来算是抛砖引玉了. $h_input.on ...

  8. input输入内容时放大问题

    最近做的微信网站有一个关于input输入框页面放大的问题.比如登录页面刚打开时正常,但用户输入信息登录时,页面就会放大.解决这个问题,首先需要在头部加一个 <meta name="vi ...

  9. 【Problem solved】发现输入法都是仅桌面使用，无法输入中文时

    你打开命令提示符输入CTFMON就可以啦.

随机推荐

  1. Python Celery队列

    Celery队列简介: Celery 是一个 基于python开发的分布式异步消息任务队列,通过它可以轻松的实现任务的异步处理, 如果你的业务场景中需要用到异步任务,就可以考虑使用celery. 使用 ...

  2. C# .NET Socket 简单实用框架

    背景: 首先向各位前辈,大哥哥小姐姐问一声好~ 这是我第一次写博客,目前为一个即将步入大四的学生,上学期在一家公司实习了半年,后期发现没有动力,而且由于薪水问题(废话嘛),于是跳槽到这家新的公司. 说 ...

  3. 自己动手写fullPage插件

    仿造fullPage.js https://alvarotrigo.com/fullPage/#firstPage 自己参照网上教程写了一个,加了注释.主要是练习造轮子的能力,需求是不断变化的只拿来用 ...

  4. SQL 软解析和硬解析详解

    详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcyt329 当客户端进程,将SQL语句通过监听器发送到Oracle时, 会触发一个 ...

  5. Linux-mknod命令(9)

    mknod命令用于创建字符设备文件和块设备文件 (ls /dev -l 结果显示b开头和c开头的,即标识了块设备和字符设备.) 为了管理设备,所以设备中都有两个设备号:  主设备号:为了区分不同类型的 ...

  6. DES加密：8051实现(C语言) & FPGA实现(VHDL+NIOS II)

    本文将利用C语言和VHDL语言分别实现DES加密,并在8051和FPGA上测试. 终于有机会阅读<深入浅出密码学一书>,趁此机会深入研究了DES加密的思想与实现.本文将分为两部分,第一部分 ...

  7. 团队作业4——第一次项目冲刺（Alpha版本）2017.4.27

    2017.04.27 天气阴沉 小雨. 时间:上午 9:35 ---10:10分 地点:陆大314实验室 会议内容:每天充分利用好大课间的时间,今天对昨天的的细节问题进行了讨论及方法更正.时间不等人这 ...

  8. 使用properties配置文件为javabean注入属性值

    ①:实体类 package com.hts.entity; import java.io.Serializable; public class A implements Serializable{ p ...

  9. 201521123035《Java程序设计》第十一周作业

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多线程相关内容. 本周对多线程的冲突是从多线程的冲突开始讲起,从而提出互斥共享与互斥访问.其中,互斥访问提到了synchronize ...

  10. 201521123117 《Java程序设计》第14周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多数据库相关内容. 2. 书面作业 1. MySQL数据库基本操作 建立数据库,将自己的姓名.学号作为一条记录插入.(截图,需出现自 ...