实时监听文本框输入

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

方法一源代码：

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

方法二源代码：

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