实时监听文本框输入

今天遇到一个这样的需求，需要根据用户的输入实时的检索出已输入文字匹配的东西出来，提示给用户看，html 标签中input的标签有onchange事件，onfocus事件，onblur事件，其中onchange事件，需要input标签失去焦点才会相应，onfocus则是获得焦点时才相应一次，onblur事件也是失去焦点后才相应，这与需求不太相关，通过不懈的百度以及google找到了一个解决方法，那就是onpropertychange事件，不过此事件存在兼容性问题，在ie下好用，而firefox，chrome等浏览器支持，不过有替代方法，那就是oninput事件。具体解决思路：一：在input标签上同时加上onpropertychange与oninput事件。二：判断浏览器类型，通过addEventListener方式为非ie浏览器添加oninput事件。

方法一源代码：

[javascript]  view plain  copy

 print ?

1. <div id="msg"></div>   
2. <input id='txt' value="" onpropertychange="handle();" οninput="handle();"/>   
3. <script>   
4. //当状态改变的时候执行的函数   
5. function handle()   
6. {document.getElementById('msg').innerHTML='输入的文字长度为：'+document.getElementById('txt').value.length;   
7. }   
8. </script>   

方法二源代码：

[javascript]  view plain  copy

 print ?

1. <div id="msg"></div>   
2. <input id='txt' value="" />   
3. <script type="text/javascript">  
4.     function handle(){  
5.         document.getElementById('msg').innerHTML="输入的文字长度为："+document.getElementById('txt').value.length;  
6.     }  
7.     //firefox下检测状态改变只能用oninput,且需要用addEventListener来注册事件。   
8.     if(/msie/i.test(navigator.userAgent))    //ie浏览器   
9.         {document.getElementById('txt').onpropertychange=handle   
10.     } else{//非ie浏览器，比如Firefox   
11.         document.getElementById('txt').addEventListener("input",handle,false);   
12.     }   
13. </script>