ie onpropertychange和firefox的oninput

最新推荐文章于 2018-07-24 17:53:00 发布

最新推荐文章于 2018-07-24 17:53:00 发布 · 175 阅读

文章标签：

#IE #Firefox #脚本 #浏览器

js 专栏收录该内容

19 篇文章

订阅专栏

本文介绍了如何在不同浏览器中实现对文本框值变化的监听。针对IE和Firefox浏览器，使用了不同的事件监听方法，并讨论了各自的局限性。

 if(navigator.userAgent.indexOf("MSIE")>=0) { 
  document.getElementById("cusRequestName").attachEvent('onpropertychange',function(o){
   if(document.getElementById("cusRequestName").value==""){
    document.getElementById("cusRequestNameC").checked = false;  
   }else{
    document.getElementById("cusRequestNameC").checked = true;;  
   }
  });
  
 }//IE

 if(navigator.userAgent.indexOf("Firefox")>=0){  
  document.getElementById("cusRequestName").addEventListener('input',function(o){
   if(document.getElementById("cusRequestName").value==""){
    document.getElementById("cusRequestNameC").checked = false;  
   }else{
    document.getElementById("cusRequestNameC").checked = true;;  
   }
  },false);
 }//FIRFOX

根据浏览器的不同，使用的方法也不同。ie下的'onpropertychange'可以检测到一个text的value变化，无论是手动输入修改，还是因为js脚本修改了value的值。

但是firefox就不同的，对于firefox只能用oninput来检测到手动输入改变的value值，对于js脚本改变的value，就无能为力检测不到了。

类似的，firefox有一个类似的方法DOMAttrModified,但是这个也只是限于attribute的变化，value值的改变同样检测不出来。一定要注意：是attribute的变化，如果下次还是用了setAttribute("x",1)，那么是不会alert的，因为这次和上次attribute的值没有变化。

<div id="div1">dfd</div>
<script>
document.getElementById("div1").addEventListener("DOMAttrModified",function(e){
alert("属性发生改变");
},false);
document.getElementById("div1").setAttribute("x",1);
</script>