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

相关文章
|
27天前
|
JavaScript 前端开发 测试技术
盘点原生JavaScript中直接触发事件的方式
本文全面探讨了原生JavaScript中触发事件的多种方式,包括`dispatchEvent`、`Event`构造函数、`CustomEvent`构造器、直接调用事件处理器以及过时的`createEvent`和`initEvent`方法。通过技术案例分析,如模拟点击事件、派发自定义数据加载事件和实现提示框系统,帮助开发者掌握这些方法在实际开发中的应用,提升灵活性与兼容性。
35 3
|
2月前
|
JavaScript 前端开发
页面滚动触发css3动画js插件
delighters.js是一款页面滚动触发css3动画js插件。该js插件可以在页面向下滚动时,为进入浏览器视口的元素制作各种炫酷的CSS3动画效果。
58 13
|
5月前
|
JavaScript 前端开发
JS中toString和valueOf在什么时候会自动触发
本文探讨了JavaScript中`toString`和`valueOf`方法在何时会自动触发,解释了隐式类型转换时这两个方法的调用机制,并提供了多个代码示例来演示它们的自动触发情况。
49 1
|
6月前
|
JSON JavaScript 前端开发
使用js实现input框的模糊搜索
使用js实现input框的模糊搜索
47 0
|
6月前
|
JavaScript 前端开发
js点击抽奖符合条件触发点击次数
js点击抽奖符合条件触发点击次数
47 1
|
7月前
|
JavaScript API
若依没解构送post请求出现的bug,vue.runtime.esm.js:620 [Vue warn]: Error in mounted hook: “TypeError: (0 , _inde
若依没解构送post请求出现的bug,vue.runtime.esm.js:620 [Vue warn]: Error in mounted hook: “TypeError: (0 , _inde
|
7月前
|
前端开发 JavaScript 流计算
前端 JS 经典:打印对象的 bug
前端 JS 经典:打印对象的 bug
56 0
|
8月前
|
移动开发 JavaScript 前端开发
rem的适配方案,css文件和js文件的引入方式,特色小边框的制作,DS-Digital.ttf数字展示屏的使用方法:,自适应图片 background-size,jQuery爆bug,a和盒子居中,
rem的适配方案,css文件和js文件的引入方式,特色小边框的制作,DS-Digital.ttf数字展示屏的使用方法:,自适应图片 background-size,jQuery爆bug,a和盒子居中,
|
8月前
|
JavaScript 前端开发
JS如何配合input框实现模糊搜索
JS如何配合input框实现模糊搜索
199 2
|
8月前
|
JavaScript
【干货】JS 限制input文本框输入
【干货】JS 限制input文本框输入

热门文章

最新文章

  • 1
    当面试官再问我JS闭包时,我能答出来的都在这里了。
    40
  • 2
    【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
    27
  • 3
    Node.js 中实现多任务下载的并发控制策略
    32
  • 4
    【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
    26
  • 5
    【JavaScript】深入理解 let、var 和 const
    49
  • 6
    【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
    47
  • 7
    【03】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架搭建-服务端-后台管理-整体搭建-优雅草卓伊凡商业项目实战
    57
  • 8
    【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
    57
  • 9
    如何通过pm2以cluster模式多进程部署next.js(包括docker下的部署)
    72
  • 10
    【01】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-需求改为思维导图-设计数据库-确定基础架构和设计-优雅草卓伊凡商业项目实战
    55