兼容Firefox和IE的onpropertychange事件oninput

最新推荐文章于 2025-09-04 18:55:33 发布

转载最新推荐文章于 2025-09-04 18:55:33 发布 · 72 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/lonelyxmas/p/3734821.html

文章标签：

#javascript #ViewUI

本文介绍如何在不同浏览器间实现输入事件监听。通过判断浏览器类型，为IE使用onpropertychange事件，为Firefox使用oninput事件，并提供了一个示例代码。

兼容Firefox和IE的onpropertychange事件oninput

原文兼容Firefox和IE的onpropertychange事件oninput

onpropertychange能够捕获每次输入值的变化。例如：对象的value值被改变时，onpropertychange能够捕获每次改变，而onchange需要执行某个事件才可以捕获。

在文本框输入数据的时候，当键盘按下并放开的时候可以使用onkeyup来检测事件，onpropertychange能够捕获每次改变，而onchange需要执行某个事件才可以捕获。可是有的时候我们输入数据是采用粘贴的方式而不是键盘输入，这就需要实时检测文本框状态的改变。
onpropertychange 不被firefox所支持，如果想在firefox下正常使用,需要用oninput属性,且需要用addEventListener来注册事件。

例子：

复制代码代码如下:

      
<html>  
      
<body>  
      
<div>oninput测试</div>  
      
<div id="testdiv"><input id='tx1' name="tx1" value="" /></div>  
      
</body>  
      
</html>  
      
<script language="JavaScript">  
      
    <!--  
      
function getOs(){//判断浏览器类型  
      
    var OsObject = "";  
      
   if(navigator.userAgent.indexOf("MSIE")>0) {  
      
        return "MSIE";  
      
   }  
      
   if(isFirefox=navigator.userAgent.indexOf("Firefox")>0){  
      
        return "Firefox";  
      
   }  
      
   if(isSafari=navigator.userAgent.indexOf("Safari")>0) {  
      
        return "Safari";  
      
   }   
      
   if(isCamino=navigator.userAgent.indexOf("Camino")>0){  
      
        return "Camino";  
      
   }  
      
   if(isMozilla=navigator.userAgent.indexOf("Gecko/")>0){  
      
        return "Gecko";  
      
   }  
      
}  
      
if(navigator.userAgent.indexOf("MSIE")>0){  
      
document.getElementById('tx1').attachEvent("onpropertychange",txChange);  
      
}else if(navigator.userAgent.indexOf("Firefox")>0){  
      
    document.getElementById('tx1').addEventListener("input",txChange2,false);  
      
}  
      
function txChange(){  
      
    alert("testie");  
      
}  
      
function txChange2(){  
      
    alert("testfirefox");  
      
}  
      
</script>