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

兼容Firefox和IE的onpropertychange事件oninput

2012-09-07 15:27 507 查看
详细出处参考：/article/1260772.html

onchange事件当用键盘改变元素的值，并且元素失去焦点的时候才会起作用。



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>

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

详细出处参考：/article/1260772.html
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航