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 输入框检测输入时执行事件

相关文章
|
22天前
|
JavaScript
事件触发、事件捕获与事件冒泡(js的问题)
事件触发、事件捕获与事件冒泡(js的问题)
11 0
|
2天前
|
JavaScript 前端开发
js开发:请解释事件冒泡和事件捕获。
JavaScript中的事件处理有冒泡和捕获两种方式。事件冒泡是从子元素向上级元素传递,而事件捕获则从外层元素向内层传递。`addEventListener`的第三个参数可设定事件模式,`false`或不设为冒泡,`true`为捕获。示例代码展示了如何设置。
17 2
|
24天前
|
JavaScript 前端开发 流计算
JS:oninput和onchange事件的区别
JS:oninput和onchange事件的区别
20 1
|
1月前
|
JavaScript 前端开发
js开发:请解释事件冒泡和事件捕获。
JavaScript中的事件处理有冒泡和捕获两种方式。事件冒泡是从子元素向上级元素依次触发事件,而事件捕获则从最外层元素向内层元素传递。`addEventListener`的第三个参数可设定事件模式,`false`或不设为冒泡,`true`为捕获。例如: ```javascript element.addEventListener('click', console.log, false); // 冒泡 element.addEventListener('click', console.log, true); // 捕获 ```
17 0
|
1月前
|
JavaScript 前端开发
JS页面加载事件
JS页面加载事件
|
JavaScript 前端开发
Javascript 事件propagation机制
Javascript 事件propagation机制
111 0
Javascript 事件propagation机制
|
JavaScript 前端开发
Javascript 事件propagation机制
Javascript 事件propagation机制
140 0
Javascript 事件propagation机制
|
2月前
|
JavaScript
Node.js【GET/POST请求、http模块、路由、创建客户端、作为中间层、文件系统模块】(二)-全面详解(学习总结---从入门到深化)
Node.js【GET/POST请求、http模块、路由、创建客户端、作为中间层、文件系统模块】(二)-全面详解(学习总结---从入门到深化)
27 0
|
2月前
|
消息中间件 Web App开发 JavaScript
Node.js【简介、安装、运行 Node.js 脚本、事件循环、ES6 作业队列、Buffer(缓冲区)、Stream(流)】(一)-全面详解(学习总结---从入门到深化)
Node.js【简介、安装、运行 Node.js 脚本、事件循环、ES6 作业队列、Buffer(缓冲区)、Stream(流)】(一)-全面详解(学习总结---从入门到深化)
77 0
|
2天前
|
JavaScript 前端开发 测试技术
学习JavaScript
【4月更文挑战第23天】学习JavaScript
10 1