兼容Firefox和IE的onpropertychange事件oninput-优快云博客

本文介绍了一种兼容Firefox浏览器的onpropertychange事件方法。通过使用oninput属性和addEventListener方法，可以在Firefox中实现与onpropertychange类似的功能，实现实时监测文本框内容变化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>