今天遇到一个这样的需求,需要根据用户的输入实时的检索出已输入文字匹配的东西出来,提示给用户看,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;
- }
-
- if(/msie/i.test(navigator.userAgent))
- {document.getElementById('txt').onpropertychange=handle
- } else{
- document.getElementById('txt').addEventListener("input",handle,false);
- }
- </script>