JS处理打拼音时触发input事件bug

简介: JS处理打拼音时触发input事件bug

     /* 处理预输入,例如输入中文汉字时,拼音的预加载不触发输入事件*/

        var cpLock = false;

        /* 添加搜索延迟*/

        var timeoutId = 0;

       

        /* 重写查询事件,当输入框为空或者查询数据为空时面板回收,否则面板显示查询数据*/

       $("#search").unbind('input').bind('input', function(e){
        if(timeoutId != null) clearTimeout(timeoutId);
        timeoutId = setTimeout(function(){
          /* 逻辑代码*/
        }, 300}/* 此处做一个搜索延迟,避免因输入过快,导致发送过多的废请求*/
9        })

       

       /* 处理打拼音时触发input事件bug,eg:https://developer.mozilla.org/zh-CN/docs/Web/Events/compositionstart*/

        $("#search").bind('compositionstart', function(){

            cpLock = true;

       });

        $("#search").bind('compositionend', function(){

            cpLock = false;

           if(timeoutId != null) clearTimeout(timeoutId);
        timeoutId = setTimeout(function(){
          /* 逻辑代码*/
        }, 300}/* 此处做一个搜索延迟,避免因输入过快,导致发送过多的废请求*/

      });

注意:由于谷歌与火狐的兼容不同,谷歌浏览器下的事件执行顺序为(compositionstart --> input --> compositionend)
火狐及其他浏览器的事件执行顺序为(compositionstart --> compositionend --> input
@compositionstart  拼音预输入执行事件;
@compositionend  拼音预输入结束执行事件
@input 输入框检测输入时执行事件

相关文章
|
1月前
|
JavaScript
js两种移除事件的方法
js两种移除事件的方法
33 2
|
1月前
|
存储 JavaScript 前端开发
js事件队列
【10月更文挑战第15天】
49 6
|
1月前
|
JavaScript API
深入解析JS中的visibilitychange事件:监听浏览器标签间切换的利器
深入解析JS中的visibilitychange事件:监听浏览器标签间切换的利器
125 0
|
1月前
|
JavaScript
js两种移除事件的方法
js两种移除事件的方法
52 0
|
1月前
|
JavaScript
js两种移除事件的方法
js两种移除事件的方法
|
6月前
|
JavaScript 前端开发
js开发:请解释事件冒泡和事件捕获。
JavaScript中的事件处理有冒泡和捕获两种方式。事件冒泡是从子元素向上级元素传递,而事件捕获则从外层元素向内层传递。`addEventListener`的第三个参数可设定事件模式,`false`或不设为冒泡,`true`为捕获。示例代码展示了如何设置。
49 2
|
4月前
|
JavaScript
js 事件流、事件冒泡、事件捕获、阻止事件的传播
js 事件流、事件冒泡、事件捕获、阻止事件的传播
75 1
|
6月前
|
JavaScript 前端开发
js开发:请解释事件冒泡和事件捕获。
JavaScript中的事件处理有冒泡和捕获两种方式。事件冒泡是从子元素向上级元素依次触发事件,而事件捕获则从最外层元素向内层元素传递。`addEventListener`的第三个参数可设定事件模式,`false`或不设为冒泡,`true`为捕获。例如: ```javascript element.addEventListener('click', console.log, false); // 冒泡 element.addEventListener('click', console.log, true); // 捕获 ```
44 0
|
6月前
|
JavaScript
JS事件,你真的懂吗(捕获,冒泡)?
JS事件,你真的懂吗(捕获,冒泡)?
59 0
|
JavaScript 容器
js中的事件冒泡与事件捕获
js中的事件冒泡与事件捕获
44 0