澳门皇冠金沙网站-澳门皇冠844网站

热门关键词: 澳门皇冠金沙网站,澳门皇冠844网站

JS判断文本框内容改变事件的简单实例

XML/HTML代码

  1. <input type="text" value="xxx" id="xx" onclick="this.myprop='xx'">  
  2.   <script type="text/javascript">  
  3.   <!--   
  4.     document.getElementById('xx').attachEvent('onpropertychange',function(o){   
  5.         for(var item in o){   
  6.             alert(item ":" o[item]);   
  7.         }   
  8.     });   
  9.   //-->  
  10. </script>  

复制代码 代码如下:

XML/HTML代码

停止冒泡事件

 

<input type="text" value="xxx" id="xx" onclick="this.myprop='xx'"> 
<script type="text/javascript"> 
<!--  
document.getElementByIdx_x_x('xx').attachEvent('onpropertychange',function(o){  
澳门皇冠844网站,alert(o.propertyName);  
});  
//--> 
</script> 

 

onpropertychange的话,只要当前对象属性发生改变,都会触发事件,但是它是IE专属的;      

XML/HTML代码

再回到我们开始的问题,我们只需要判断是否是value被改变就ok了。
直接看代码吧:

 

执行上面的代码,单击输入框发现也会触发onpropertychange,输入一个值同样也会触发这个事件,这就证明了,只要有属性的值被修改就会触发该事件。

  1. <input type="text" value="xxx" id="xx" onclick="this.myprop='xx'">  
  2. <script type="text/javascript">  
  3. <!--   
  4. document.getElementById('xx').attachEvent('onpropertychange',function(o){alert('ok')});   
  5. //-->  
  6. </script>  

<input type="text" value="xxx" id="xx" onclick="this.myprop='xx'"> 
<script type="text/javascript"> 
<!--  
document.getElementByIdx_x_x('xx').attachEvent('onpropertychange',function(o){  
for(var item in o){  
alert(item ":" o[item]);  
}  
});  
//--> 
</script> 

   分别单击文本框和输入一个值,会发现分别弹出了myprop和value。
  
   再回到我们开始的问题,我们只需要判断是否是value被改变就ok了。
   直接看代码吧:

XML/HTML代码

XML/HTML代码

<input type="text" value="xxx" id="xx" onclick="this.myprop='xx'"> 
<script type="text/javascript"> 
<!--  
document.getElementByIdx_x_x('xx').attachEvent('onpropertychange',function(o){  
if(o.propertyName!='value')return;  //不是value改变不执行下面的操作  
//.......函数处理  
});  
//--> 
</script>

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

oninput,onpropertychange,onchange的用法

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

onchange触发事件必须满足两个条件:

  1. <input type="text" value="xxx" id="xx" onclick="this.myprop='xx'">  
  2. <script type="text/javascript">  
  3. <!--   
  4.   document.getElementById('xx').attachEvent('onpropertychange',function(o){   
  5.       if(o.propertyName!='value')return;  //不是value改变不执行下面的操作   
  6.       //.......函数处理   
  7.   });   
  8. //-->  
  9. </script>  

复制代码 代码如下:

XML/HTML代码

执行一下,发现有很多个属性,但仔细看我们可能会发现这么一个属性:propertyname,相信每个人都能猜到这个属性的意思了。对,这个就是用来获取哪个属性被修改的。

三.让FF支持onPropertyChange类似的效果

本文由澳门皇冠金沙网站发布于前端开发,转载请注明出处:JS判断文本框内容改变事件的简单实例