您的位置：首页 > 运维架构

兼容Firefox和IE的onpropertychange事件oninput

2012-05-09 16:18 357 查看

onpropertychange 不被firefox所支持，如果想在firefox下正常使用,需要用oninput属性,以下方法亲自测试可用

于是在网上就找到了一个可行性方法~~ Firefox有个oninput事件效果和onPropertyChange一样，所以同时加上oninput和onPropertyChange问题就解决鸟~~~ oo….

<input type="text" oninput="cgColor(this);" onPropertyChange="cgColor(this);" maxlength="4" name="pt_bankou" id="pt_bankou" value="" />

还有一种方法-----------------------------------------------------------------------------

onpropertychange能够捕获每次输入值的变化。例如：对象的value值被改变时，onpropertychange能够捕获每次改变，而onchange需要执行某个事件才可以捕获。
在文本框输入数据的时候，当键盘按下并放开的时候可以使用onkeyup来检测事件，onpropertychange能够捕获每次改变，而onchange需要执行某个事件才可以捕获。可是有的时候我们输入数据是采用粘贴的方式而不是键盘输入，这就需要实时检测文本框状态的改变。

<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>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

例子：

复制代码代码如下:

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航