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>

 

posted @ 2017-10-26 16:13  杰森啊  阅读(216)  评论(0编辑  收藏  举报