解决手机端中文输入法中keyup不灵便的方法

项目中有一处需求是，搜索框依据用户输入的值实时检索，一开始自然而然想到keyup，在拼音状态时，啥问题也没有，后来切换到中文输入法，问题出来了，不灵便了，后来在网上搜了下，找到了思路，主要是给搜索框注册focus事件，隔个时间去检索下，贴出代码

[javascript]  view plain  copy

 print ?

1. <script language="javascript" type="text/javascript" src="jquery.js"></script>  
2.     <script>  
3.   
4.     $(function () {  
5.         $('#wd').bind('focus',filter_time);  
6.     })  
7.   
8.     var str = '';  
9.     var now = ''  
10.     filter_time = function(){  
11.         var time = setInterval(filter_staff_from_exist, 100);  
12.         $(this).bind('blur',function(){  
13.             clearInterval(time);  
14.         });  
15.     };  
16.   
17.     filter_staff_from_exist = function(){  
18.         now = $.trim($('#wd').val());  
19.         if (now != '' && now != str) {  
20.             console.log(now);  
21.         }  
22.         str = now;  
23.     }  
24.     </script>  

当监听一个input的keyup的事件的时候,英文输入法的情况下可以实时的通过keyup事件检测到文本框value的变化，但是当输入法变成中文后，input的keyup事件就不会被正常触发。这是最先前的写法。

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

< html > < head > < script type = "text/javascript" src = "http://www.jb51.net/static/js/jquery-1.4.2.min.js" ></ script > </ head > < body >    < p >      使用keyup事件检测文本框内容：    </ p >    < p >      < input type = "text" name = "keyup_i" id = "keyup_i" autocomplete = "off" />      < span id = "keyup_s" ></ span >      < script type = "text/javascript" >        $('#keyup_i').bind('keyup', function(){          $('#keyup_s').text($(this).val());        })      </ script >    </ p > </ body > </ html >

如你所见，这样的写法遇到了中文不能触发keyup事件的问题。于是寻求解决方法，想起来baidu的搜索栏提示似乎是没有这个问题的，于是开始看百度的js。百度的js比较难看...方法命名净是一个字母，最后发现大概是使用了timeout做一个定时器来定时监测input框的修改。不是很满意这样的方法。于是继续查找看有没有更好的解决办法，于是就找到了oninput和onpropertychange两个事件。

oninput是firefox下面可用，而onpropertychange则是ie下可用。两个方法有着一些区别。

oninput只能检测到value这个属性的变化，而onpropertychange则可以检测到包含value的所有属性的变化。于是开始改成这个样子。

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

< html > < head > < script type = "text/javascript" src = "http://www.jb51.net/static/js/jquery-1.4.2.min.js" ></ script > </ head > < body >    < p >      使用oninput以及onpropertychange事件检测文本框内容：    </ p >    < p >      < input type = "text" name = "inputorp_i" id = "inputorp_i" autocomplete = "off" />      < span id = "inputorp_s" ></ span >      < script type = "text/javascript" >        //先判断浏览器是不是万恶的IE，没办法，写的东西也有IE使用者        var bind_name = 'input';        if (navigator.userAgent.indexOf("MSIE") != -1){          bind_name = 'propertychange';        }        $('#inputorp_i').bind(bind_name, function(){          $('#inputorp_s').text($(this).val());        })      </ script >    </ p > </ body > </ html >

今天做一个异步查询功能的时候发现在IOS设备上查询中文时keyup没有触发，在其他设备上时可以的，后来在stackoverflow上找到下面这种解决方法，贴出来算是抛砖引玉了。

1 $h_input.on('input paste', function() {
2 /*省略*/
3 });