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

相关文章
|
14天前
|
JavaScript 前端开发
js事件队列
js事件队列
|
3天前
|
JavaScript 前端开发
JavaScript 事件
JavaScript 事件
14 2
|
2天前
Nest.js 实战 (十二):优雅地使用事件发布/订阅模块 Event Emitter
这篇文章介绍了在Nest.js构建应用时,如何通过事件/发布-订阅模式使应用程序更健壮、灵活、易于扩展,并简化服务间通信。文章主要围绕@nestjs/event-emitter模块展开,这是一个基于eventemitter2库的社区模块,提供了事件发布/订阅功能,使得实现事件驱动架构变得简单。文章还介绍了如何使用该模块,包括安装依赖、初始化模块、注册EventEmitterModule、使用装饰器简化监听等。最后总结,集成@nestjs/event-emitter模块可以提升应用程序的事件驱动能力,构建出更为松耦合、易扩展且高度灵活的系统架构,是构建现代、响应迅速且具有高度解耦特性的Nest.
|
17天前
|
编解码 JavaScript 前端开发
JS逆向浏览器脱环境专题:事件学习和编写、DOM和BOM结构、指纹验证排查、代理自吐环境通杀环境检测、脱环境框架、脱环境插件解决
JS逆向浏览器脱环境专题:事件学习和编写、DOM和BOM结构、指纹验证排查、代理自吐环境通杀环境检测、脱环境框架、脱环境插件解决
38 1
|
27天前
|
JavaScript 前端开发
js的回车事件
js的回车事件
33 3
|
2月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
69 2
|
2月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的宠物援助平台附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的宠物援助平台附带文章源码部署视频讲解等
62 4
|
2月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的宠物交易平台附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的宠物交易平台附带文章源码部署视频讲解等
54 4
|
2月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的大学生入伍人员管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的大学生入伍人员管理系统附带文章源码部署视频讲解等
66 4
|
1月前
|
JavaScript 前端开发
JS:一篇文章带你搞懂什么是异步
JS:一篇文章带你搞懂什么是异步