码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2018-07-31 21:41:23      阅读:346      评论:0      收藏:0      [点我收藏+]

标签:pos   doc   bug   ocs   导致   处理   执行   请求   输入   

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

 

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

标签:pos   doc   bug   ocs   导致   处理   执行   请求   输入   

原文地址:https://www.cnblogs.com/hualuo-sign/p/9397481.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!