oninput、onpropertychange和onchange
oninput 事件在用户输入时触发。即只要元素值发生变化立即触发。只有IE9以上才支持
onchange 在元素失去焦点时触发。即元素值发生变化没有立即触发,需失去焦点才触发。另外一点不同是 onchange 事件也可以作用于 <keygen> 和 <select> 元素。
onpropertychange为IE专属的,也是无需考虑是否失去焦点,只要元素值发生改变就触发。
因此,当要实现元素值发生变化即立即触发时,就应结合oninput和onpropertychange来实现
方法:判断浏览器类型,如果是IE,就使用onpropertychange,否则就用oninput。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title></title> 5 <script type="text/javascript"> 6 function myFunction() 7 { 8 //判断是否为IE浏览器,如果是则返回,不调用此函数 9 var userAgent=navigator.userAgent; 10 var isOpera = userAgent.indexOf("Opera") > -1; 11 if(userAgent.indexOf("compatible")>-1&&userAgent.indexOf("MSIE")>-1&& !isOpera) 12 return; 13 else 14 alert("1"); 15 } 16 function OnPropertyChange(event) 17 { 18 var userAgent=navigator.userAgent; 19 var isOpera = userAgent.indexOf("Opera") > -1; 20 if(userAgent.indexOf("compatible")>-1&&userAgent.indexOf("MSIE")>-1&& !isOpera) 21 alert("2"); 22 else 23 return; 24 } 25 </script> 26 </head> 27 <body> 28 <input type="text" oninput="myFunction()" onpropertychange="OnPropertyChange(event)"> 29 </body> 30 </html>