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

Posted 2020-12-26 hualuo-sign

 1 　　　　 /* 处理预输入，例如输入中文汉字时，拼音的预加载不触发输入事件*/
 2         var cpLock = false;
 3         /* 添加搜索延迟*/
 4         var timeoutId = 0;
 5         
 6         /* 重写查询事件，当输入框为空或者查询数据为空时面板回收，否则面板显示查询数据*/
 7         $("#search").unbind(‘input‘).bind(‘input‘, function(e){
　　　　　　　　　if(timeoutId != null) clearTimeout(timeoutId);
　　　　　　　　　timeoutId = setTimeout(function(){
　　　　　　　　　　 /* 逻辑代码*/
　　　　　　　　　}, 300}/* 此处做一个搜索延迟，避免因输入过快，导致发送过多的废请求*/ 9         })
10         
11         /* 处理打拼音时触发input事件bug，eg:https://developer.mozilla.org/zh-CN/docs/Web/Events/compositionstart*/
12         $("#search").bind(‘compositionstart‘, function(){
13             cpLock = true;
14         });
15         $("#search").bind(‘compositionend‘, function(){
16             cpLock = false;
17             if(timeoutId != null) clearTimeout(timeoutId);
　　　　　　　　　timeoutId = setTimeout(function(){
　　　　　　　　　　 /* 逻辑代码*/
　　　　　　　　　}, 300}/* 此处做一个搜索延迟，避免因输入过快，导致发送过多的废请求*/
　　　　　　　});
注意：由于谷歌与火狐的兼容不同，谷歌浏览器下的事件执行顺序为（compositionstart --> input --> compositionend）
火狐及其他浏览器的事件执行顺序为（compositionstart --> compositionend --> input）
@compositionstart  拼音预输入执行事件；
@compositionend  拼音预输入结束执行事件
@input 输入框检测输入时执行事件