兼容Firefox和IE的onpropertychange事件oninput

转载 2012年03月21日 08:59:27

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

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

<div id="msg"></div> 
<input id='txt' value="" /> 
<script> 
//当状态改变的时候执行的函数 
function handle() 
{document.getElementById('msg').innerHTML='输入的文字长度为:'+document.getElementById('txt').value.length; 
} 
//firefox下检测状态改变只能用oninput,且需要用addEventListener来注册事件。 
if(/msie/i.test(navigator.userAgent))    //ie浏览器 
{document.getElementById('txt').onpropertychange=handle 
} 
else 
{//非ie浏览器,比如Firefox 
document.getElementById('txt').addEventListener("input",handle,false); 
} 
</script> 

例子:

 代码如下:

<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事件方法。 

相关文章推荐

oninput & onpropertychange实时监听输入框的变化 && ie8堆栈溢出

(注:本文针对IE8ji以上版本) oninput 是 HTML5 的标准事件,对于检测 textarea, input:text, input:password 和 input:search 这...

总结oninput、onchange与onpropertychange事件的用法和区别

前端页面开发的很多情况下都需要实时监听文本框输入,比如腾讯微博编写140字的微博时输入框hu9i动态显示还可以输入的字数。过去一般都使用onchange/onkeyup/onkeypress/onke...

oninput、onchange与onpropertychange事件的用法和区别

前端页面开发的很多情况下都需要实时监听文本框输入,比如腾讯微博编写140字的微博时输入框hu9i动态显示还可以输入的字数。过去一般都使用onchange/onkeyup/onkeypress/onke...

总结oninput、onchange与onpropertychange事件的用法和区别

前端页面开发的很多情况下都需要实时监听文本框输入,比如腾讯微博编写140字的微博时输入框hu9i动态显示还可以输入的字数。过去一般都使用onchange/onkeyup/onkeypress/onke...

总结oninput、onchange与onpropertychange事件的用法和区别

前端页面开发的很多情况下都需要实时监听文本框输入,比如腾讯微博编写140字的微博时输入框hu9i动态显示还可以输入的字数。过去一般都使用onchange/onkeyup/onkeypress/onke...

监听文本框内容改变事件oninput,onpropertychange,onchange的用法和区别

onpropertychange不用考虑是否失去焦点,不管js操作还是键盘鼠标手动操作,只要HTML元素属性发生改变即可立即捕获到。遗憾的是,onpropertychange为IE专属的。其他浏览器下...

oninput、onchange与onpropertychange事件的区别, 与input输入框实时检测

oninput、onchange与onpropertychange事件的区别, 与input输入框实时检测,输入框内容改变时发生的事件,实时获取输入框的内容,检测输入框内容为空的事件,输入框不为空执行...

JavaScript 总结onchange、onpropertychange、oninput事件的用法和区别

目录: onchange onpropertychange oninput 1. onchange事件1.1 定义和用法 onchange事件会在域的内容改变时发生 ( 在元素值改变...

oninput、onchange 和 onpropertyChange 事件

oninput: oninput 事件在用户输入时触发。该事件在或者元素的值发生改变时触发; 无论是键盘输入还是鼠标粘贴的改变都能及时监听到变化; 提示:  ...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:兼容Firefox和IE的onpropertychange事件oninput
举报原因:
原因补充:

(最多只允许输入30个字)