兼容Firefox和IE的onpropertychange事件oninput

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

//当状态改变的时候执行的函数
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);
}

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

赞 (0)

相关推荐

  • js监听输入框值的即时变化onpropertychange、oninput

    要达到的效果 很多情况下我们都会即时监听输入框值的变化,以便作出即时动作去引导浏览者增强网站的用户体验感.比如即时显示输入框已经被输入的字节数,或者即时读取输入的值来进行搜索引导,也就是google的关联搜索效果等. 只要我们能捕获即时事件就能做到很多事情. 需要了解的知识 首先,我们需要了解onchange和onpropertychange的不同: IE下,当一个HTML元素的属性改变的时候,都能通过 onpropertychange来即时捕获. onchange在属性值改变时还必须使得当前元

  • js propertychange和oninput事件

    js propertychange和oninput事件

    还好有propertychange(IE)和oninput事件. oninput是标准浏览器的事件,一般应用于input元素,当input的value发生变化时就会发生,无论是键盘输入还是鼠标粘贴的改变都能即时监听到. 浏览器兼容 IE9以下是不支持的.这个时候就要用到IE专有的propertychange事件.顾名思义,翻译过来叫属性变更事件,这个事件就比较强大了,不仅仅会监听到input的value属性,还包括其他标签的属性各种属性发生变化都会发生该事件,比如span元素的style属性.在

  • asp.net关于onpropertychange和oninput事件实现代码

    整体思路是这样,当文本框的值改变时触发事件,对列表中原有的值进行过滤. 根据这个思路,首先需要解决的无非是确定文本框的什么事件可以满足要求,当时第一个想到的是onkeydown或者onkeypress,在试的过程中发现再输入中文时,无法响应,因为输入方会将焦点给屏蔽了.在网上寻觅了一会发现onpropertychange事件为改变文本属性时就会出发,所以当文本框输入数据的时候其实是在改变文本框的value属性.而且中文也可以满足,本以为大功告成,最后才发现这个事件为IE的专属事件,其他的浏览器并

  • javascript开发中使用onpropertychange,oninput事件解决onchange事件的不足

    onchange在用于文本框输入框时,有一个明显的不足. 事件不会随着文字的输入而触发,而是等到文本框失去焦点(onblur)时才会触发. 也就是没有即时性! 在IE下,可以用onpropertychange来代替onchange事件,当文本框有任何变化时,能立即触发此事件. 这样一来问题就解决了. 那其他浏览器呢,onpropertychange可是IE的专利. 接下来就是oninput事件了. 但是oninput有个诡异,必须用addEventListener的方式来绑定事件.否则无效. 好

  • 输入框的字数时时统计—关于 onpropertychange 和 oninput 使用

    网上看到很方便实现这个功能的事件: IE 中的 onpropertychange 非IE中的 oninput 用这两事件的好处是,当在输入框的内容发生变化调用事件,使用key 和 mouse的相关事件会比较复杂,而且这个方法用粘贴方法一样有效. 不过用js改变input的value值不会发生这两个事件. 在中文本框中添加两个事件的方法就可以了.(看到网上说非ie中的oninput方法要用addEventListener绑定,用 element.oninput = function(){...}不

  • 兼容Firefox和IE的onpropertychange事件oninput

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

  • IE浏览器兼容Firefox的JS脚本的代码

    1.window.event兼容脚本 2.屏蔽Form提交事件 3.获取事件源 4.添加事件兼容写法 5.Firefox注册innerText写法 6.长度 7.父控件下的子控件 8.XmlHttp 1.window.event兼容脚本 function getEvent(){ //获取浏览器事件,同时兼容ie和ff的写法 if(document.all) return window.event; func=getEvent.caller; while(func!=null){ var arg0

  • div+css+js实现无缝滚动类似marquee无缝滚动兼容firefox

    div+css+javascript 实现无缝滚动,marquee无缝滚动,无缝滚动,兼容firefox 用marquee实现首尾相连循环滚动效果(仅IE): 复制代码 代码如下: <marquee behavior="scroll" contenteditable="true" onstart="this.firstChild.innerHTML+=this.firstChild.innerHTML;" scrollamount=&quo

  • JS中使用new Date(str)创建时间对象不兼容firefox和ie的解决方法(两种)

    IE中new Date(strDate)返回无效时间解决方式: 方法一: function getDateForStringDate(strDate){ //切割年月日与时分秒称为数组 var s = strDate.split(" "); var s1 = s[0].split("-"); var s2 = s[1].split(":"); if(s2.length==2){ s2.push("00"); } return

  • 关于IE浏览器以及Firefox下的javascript冒泡事件的响应层级

    关于IE浏览器以及Firefox下的javascript冒泡事件的响应层级

    假设在我们页面有这么一段标签: 复制代码 代码如下: <body> <div id="testDiv" style="width:200px;height:200px;background:#c0c0c0;"></div> </body> 现在在页面加入这么一段脚本: 复制代码 代码如下: <script type="text/javascript"> window.onload=fun

  • javascript下兼容firefox选取textarea文本的代码

    主要用到的js代码 复制代码 代码如下: function getSelectedText(){         var selectedText;         var textField=document.getElementById('inputTextarea');         if(window.getSelection) selectedText=getTextFieldSelection(textField);//getTextFieldSelection(document.

  • js Firefox 加入收藏夹功能代码 兼容Firefox 和 IE

    完整代码如下:chrome下也有提示,说实话一般这类代码一般都是IE下使用,其它浏览器也只是给个提示了. <script type="text/javascript"> //设为首页 www.jb51.net function SetHome(obj,url){ try{ obj.style.behavior='url(#default#homepage)'; obj.setHomePage(url); }catch(e){ if(window.netscape){ try

  • 兼容firefox的给每一个onClick再附加一个事件

    给每一个onClick再附加一个事件 onClick再附加一个事件_我们 body{ } test function addEvent_onclick(obj,func) { with(obj) { if(getAttribute("onclick")==null || typeof(onclick)!='function') { onclick=function(){func();}; } else { var oldonclick=onclick; onclick=function

随机推荐