今天遇到一个这样的需求,需要根据用户的输入实时的检索出已输入文字匹配的东西出来,提示给用户看,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>