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

相关文章
|
7月前
|
JavaScript 前端开发 Java
【Java进阶】详解JavaScript事件
总的来说,JavaScript事件是JavaScript交互设计的核心,理解和掌握JavaScript事件对于编写高效、响应式的网页应用至关重要。
139 15
|
10月前
|
JavaScript 前端开发 测试技术
盘点原生JavaScript中直接触发事件的方式
本文全面探讨了原生JavaScript中触发事件的多种方式,包括`dispatchEvent`、`Event`构造函数、`CustomEvent`构造器、直接调用事件处理器以及过时的`createEvent`和`initEvent`方法。通过技术案例分析,如模拟点击事件、派发自定义数据加载事件和实现提示框系统,帮助开发者掌握这些方法在实际开发中的应用,提升灵活性与兼容性。
368 3
|
11月前
|
JavaScript 前端开发
页面滚动触发css3动画js插件
delighters.js是一款页面滚动触发css3动画js插件。该js插件可以在页面向下滚动时,为进入浏览器视口的元素制作各种炫酷的CSS3动画效果。
142 13
|
12月前
|
缓存 JavaScript 前端开发
JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用。
429 5
|
存储 JavaScript 前端开发
js事件队列
【10月更文挑战第15天】
198 6
|
JavaScript API
深入解析JS中的visibilitychange事件:监听浏览器标签间切换的利器
深入解析JS中的visibilitychange事件:监听浏览器标签间切换的利器
688 0
|
JavaScript 前端开发
javascript判断触发事件event的鼠标按钮
function whichButton(event){var btnNum = event.button;if (btnNum==2)  {  alert("您点击了鼠标左键!")  }else if(btnNum==0)  {  alert("您点击了鼠标右键!")  }else if(btnNum==1)  {  alert("您点击了鼠标中键!");  }else  {  alert("您点击了" + btnNum+ "号键,我不能确定它的名称。
900 0
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
280 2
|
12月前
|
JavaScript 前端开发
JavaScript中的原型 保姆级文章一文搞懂
本文详细解析了JavaScript中的原型概念,从构造函数、原型对象、`__proto__`属性、`constructor`属性到原型链,层层递进地解释了JavaScript如何通过原型实现继承机制。适合初学者深入理解JS面向对象编程的核心原理。
210 1
JavaScript中的原型 保姆级文章一文搞懂
|
12月前
JS+CSS3文章内容背景黑白切换源码
JS+CSS3文章内容背景黑白切换源码是一款基于JS+CSS3制作的简单网页文章文字内容背景颜色黑白切换效果。
132 0

热门文章

最新文章