HTML笔记 ·

input输入中文时,拼音触发input事件

在上一篇文章中写到了函数防抖,在使用函数防抖来进行搜索框优化的时候会遇到一个问题,就是监听文本输入框的input事件,在拼写汉字(输入法)但汉字并未实际填充到文本框中时会触发input事件,会出现下图的效果
input输入中文时,拼音触发input事件

上图的效果是没有采用函数防抖的效果的,如果加上函数防抖也同样会出现这个效果,在此仅仅是进行效果展示。这是我们不希望看到的,我们希望得到的效果是汉字输入进去以后再触发事件。
通过查询,我发现input有两个事件:compositionstartcompositionend。在输入中文(包括语音识别时)会先后触发compositionstart、compositionend事件,类似于keydown和keyup的组合。来看一下关于两个事件的介绍:
compositionstart:事件触发于一段文字的输入之前(类似于 keydown 事件,但是该事件仅在若干可见字符的输入之前,而这些可见字符的输入可能需要一连串的键盘操作、语音识别或者点击输入法的备选词)。个人可以理解为输入拼音状态开始执行的事件

compositionend:当文本段落的组织已经完成或取消时,会触发该事件。这个个人可以理解为输入拼音结束,按下空格将汉字输入完成以后执行的事件。
有了这两个事件,再加上onkeyup事件,我们就可以实现拼音阶段不执行搜索的效果了,具体思路为:
1. 声明一个全局变量flag,设置为true
2. 添加compositionstart事件,在该事件执行时将flag设置为false
3. 添加compositionend事件,在该时间执行时将flag设置为true
4. 添加onkeyup事件,在该事件执行时判断flag是否为true,如果为true,则执行搜索。

下面来看代码示例

<input id="txt" type="text">
<script>
   var flag = true;
   ('#txt').on('compositionstart',function(){
        flag = true;
    })('#txt').on('compositionend',function(){
        flag = true;
    })
    ('#txt').on('keyup',function(){
        var _this = this;
           if(flag){
               console.log((_this).val());
            }
    })
</script>

参与评论