兼容Firefox和IE的onpropertychange事件oninput

简介: 原文 兼容Firefox和IE的onpropertychange事件oninput onpropertychange能够捕获每次输入值的变化。例如:对象的value值被改变时,onpropertychange能够捕获每次改变,而onchange需要执行某个事件才可以捕获。

原文 兼容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> 

以上就是兼容Firefox的onpropertychange事件方法。

 

 

目录
打赏
0
0
0
0
216
分享
相关文章
什么是响应式设计?响应式设计的基本原理是什么?如何兼容低版本的IE?
什么是响应式设计?响应式设计的基本原理是什么?如何兼容低版本的IE?
110 0
添加浮动按钮点击滚动到网页底部的纯JavaScript演示代码 IE9、11,Maxthon 1.6.7,Firefox30、31,360极速浏览器7.5.3.308下测试正常
添加浮动按钮点击滚动到网页底部的纯JavaScript演示代码 IE9、11,Maxthon 1.6.7,Firefox30、31,360极速浏览器7.5.3.308下测试正常
什么是响应式设计?响应式设计的基本原理是什么?如何兼容低版本的 IE?
什么是响应式设计?响应式设计的基本原理是什么?如何兼容低版本的 IE?
css中什么是响应式设计?响应式设计的基本原理是什么?如何兼容低版本的IE?
css中什么是响应式设计?响应式设计的基本原理是什么?如何兼容低版本的IE?
100 0
vue里使用animated-scroll-to代替原生滚动实现兼容ie的平滑滚动定位
vue里使用animated-scroll-to代替原生滚动实现兼容ie的平滑滚动定位
185 0
什么是响应式设计?响应式设计的基本原理是什么?如何兼容低版本的 IE?
什么是响应式设计?响应式设计的基本原理是什么?如何兼容低版本的 IE?
JS 获取当前浏览器类型(IE、Chrome、Edge、Firefox、Opera、UC、QQ)
JS 获取当前浏览器类型(IE、Chrome、Edge、Firefox、Opera、UC、QQ)
1334 0
[vuex] vuex requires a Promise polyfill in this browser. vue2兼容ie
vue-cli 是一个官方推荐的vue项目脚手架,搭建项目就不用那么费劲了。但是搭建好的项目是一般可以ie9的浏览器中打开的(这里指的是vue2)。ie9主要特别蛋疼的地方在于不能使用弹性盒模型。所以一直兼容ie都是从ie10开始进行兼容的。
[vuex] vuex requires a Promise polyfill in this browser. vue2兼容ie