兼容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以及其兼容处理

在我们鄙视ie浏览器的同时,也发现了ie浏览器在某些方面确实是领先于W3C的,比如监听属性改变的就是一个例子。 在传统意义上,处理表单输入框值的改变,需要监听onblur事件或者onchange...
  • qq_16209077
  • qq_16209077
  • 2016年11月14日 20:10
  • 1690

实时监听输入框值变化的完美方案:oninput & onpropertychange(真正完美,支持ie9以下,ie10,chrome)

原地址:http://www.cnblogs.com/lhb25/archive/2012/11/30/oninput-and-onpropertychange-event-for-input.htm...
  • rztyfx
  • rztyfx
  • 2015年04月29日 16:46
  • 5801

监听输入框值的即时变化onpropertychange、oninput兼容IE,Chrome,FF,Opera等

要达到的效果 很多情况下我们都会即时监听输入框值的变化,以便作出即时动作去引导浏览者增强网站的用户体验感。比如即时显示输入框已经被输入的字节数,或者即时读取输入的值来进行搜索引导,也就是goog...
  • itchiang
  • itchiang
  • 2012年07月21日 02:34
  • 9888

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

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

oninput 、onpropertychange 、addEvent思考

1. onchange事件与onpropertychange事件的区别:   onchange事件在内容改变(两次内容有可能相等)且失去焦点时触发;onpropertychange事件是实时触发...
  • Fupengyao
  • Fupengyao
  • 2016年04月08日 15:17
  • 450

修复IE9下oninput事件(原生,jq)

IE9下虽然有oninput事件,但是这个input事件只是个半成品,它无法响应删除(Backspace,Del,右键菜单删除,右键菜单剪切)。 而且最奇葩的是 IE8下可以响应删除的propert...
  • u013328563
  • u013328563
  • 2015年09月17日 21:58
  • 1464

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

(注:本文针对IE8ji以上版本) oninput 是 HTML5 的标准事件,对于检测 textarea, input:text, input:password 和 input:search 这...
  • panying0903
  • panying0903
  • 2015年12月09日 11:21
  • 3323

兼容Firefox和IE的onpropertychange事件oninput

在文本框输入数据的时候,当键盘按下并放开的时候可以使用onkeyup来检测事件,onpropertychange能够捕获每次改变,而onchange需要执行某个事件才可以捕获。可是有的时候我们输入数据...
  • yiluoAK_47
  • yiluoAK_47
  • 2012年03月01日 15:43
  • 655

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

oninput、onchange与onpropertychange事件的区别, 与input输入框实时检测,输入框内容改变时发生的事件,实时获取输入框的内容,检测输入框内容为空的事件,输入框不为空执行...
  • u010035608
  • u010035608
  • 2016年05月06日 09:58
  • 698

【监听文本框输入】区分oninput;onchange与onpropertychange

1.oninput: oninput 事件在用户输入时触发。 该事件在 或 元素的值发生改变时触发。 2.onchange: onchange 事件会在域的内容改变时发生。 oncha...
  • qq_29066959
  • qq_29066959
  • 2016年09月07日 14:36
  • 301
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:兼容Firefox和IE的onpropertychange事件oninput
举报原因:
原因补充:

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