监听文本框内容改变事件之oninput、onchange与onpropertychange事件... - 简书
监听文本框内容改变事件之oninput、onchange与onpropertychange事件的用法和区别
监听文本框内容改变事件是一个很常见的需求，比如动态提示还能输入多少字。但是在实际应用的过程中，会有很多意想不到的坑。
onchange事件
只在键盘或者鼠标操作改变对象属性，且失去焦点时触发，脚本触发无效
onkeydown/onkeypress/onkeyup在处理复制、粘贴、拖拽、长按键（按住键盘不放）等细节上并不完善
onpropertychange此属性可在某些情况下解决上面存在的问题，不用考虑是否失去焦点，不管js操作还是键盘鼠标手动操作，只要HTML元素属性发生改变即可立即捕获到。遗憾的是，onpropertychange为IE专属的
oninputHTML5中的标准事件，不过IE9以下的浏览器是不支持oninput事件的。
针对上面的分析，我们应当对所有ie使用onpropertychange，其他浏览器用oninput来实现我们的需求
var ie = !!window.ActiveXO
object.onpropertychange =
object.addEventListener("input",fn,false);
最后，附上比较
1、onchange事件与onpropertychange事件的区别：
onchange事件在内容改变（两次内容有可能还是相等的）且失去焦点时触发；
onpropertychange事件却是实时触发，即每增加或删除一个字符就会触发，通过js改变也会触发该事件，但是该事件IE专有。
2、oninput事件与onpropertychange事件的区别：
oninput事件是IE之外的大多数浏览器支持的事件，在value改变时触发，实时的，即每增加或删除一个字符就会触发，然而通过js改变value时，却不会触发；
onpropertychange事件是任何属性改变都会触发的，而oninput却只在value改变时触发，
oninput要通过addEventListener()来注册，onpropertychange注册方式跟一般事件一样。
（此处都是指在js中动态绑定事件，以实现内容与行为分离）
3、oninput与onpropertychange失效的情况：
（1）oninput事件：
a). 当脚本中改变value时，不会触发；
b).从浏览器的自动下拉提示中选取时，不会触发。
（2）onpropertychange事件：当input设置为disable=true后，onpropertychange不会触发。
参考地址：
每个人有每个人的选择，不要随意评价。个人站点：/...监听HTML input输入框值的即时变化onpropertychange、oninput兼容IE,Chrome,FF,Opera等
监听HTML input输入框值的即时变化onpropertychange、oninput兼容IE,Chrome,FF,Opera等
发布时间： 11:48:34
编辑：www.fx114.net
本篇文章主要介绍了"监听HTML input输入框值的即时变化onpropertychange、oninput兼容IE,Chrome,FF,Opera等 "，主要涉及到监听HTML input输入框值的即时变化onpropertychange、oninput兼容IE,Chrome,FF,Opera等 方面的内容，对于监听HTML input输入框值的即时变化onpropertychange、oninput兼容IE,Chrome,FF,Opera等 感兴趣的同学可以参考一下。
转自：http://blog.csdn.net/itchiang/article/details/7769337
要达到的效果
很多情况下我们都会即时监听输入框值的变化，以便作出即时动作去引导浏览者增强网站的用户体验感。比如即时显示输入框已经被输入的字节数，或者即时读取输入的值来进行搜索引导，也就是google的关联搜索效果等。只要我们能捕获即时事件就能做到很多事情。
需要了解的知识
首先，我们需要了解：
IE下，当一个HTML元素的属性改变的时候，都能通过 onpropertychange来即时捕获。
onchange在属性值改变时还必须使得当前元素失去焦点(onblur)才可以激活该事件。
了解这一点后我们发现onpropertychange的效果就是我们想要的，可是很遗憾，它只在IE下有效果。我们能不能找到另外一个时间来代替onpropertychange呢？
经过翻阅资料得知，在其他浏览器下可以使用oninput事件来达到同样的效果，真是太好了，我们只需要把IE浏览器区分出来就可以。
oninput的使用
下面我们先了解一下oninput如何使用。如果您是将注册时间直接写在页面里面，那么如下写法就可以实现：
&input type="text" name="textfield" oninput="alert(this.value);" onpropertychange="alert(this.value)" /&
但是，将oninput写在JS代码中分离出来时与普通事件注册的方法有些不同，必须使用addEventListener来注册。
attachEvent和addEventListener 的不同
说到这里我们再来了解一下&：
attachEvent方法，为某一事件附加其它的处理事件。（不支持Mozilla系列）addEventListener方法 用于 Mozilla系列
document.getElementById("btn").onclick = method1;document.getElementById("btn").onclick = method2;document.getElementById("btn").onclick = method3;
如果这样写,那么将会只有medhot3被执行
写成这样：
var btn1Obj = document.getElementById("btn1");btn1Obj.attachEvent("onclick",method1);btn1Obj.attachEvent("onclick",method2);btn1Obj.attachEvent("onclick",method3);&
执行顺序为method3-&method2-&method1
如果是Mozilla系列，并不支持该方法，需要用到addEventListener
var btn1Obj = document.getElementById("btn1");btn1Obj.addEventListener("click",method1,false);btn1Obj.addEventListener("click",method2,false);btn1Obj.addEventListener("click",method3,false);
执行顺序为method1-&method2-&method3
了解了如何使用addEventListener来注册oninput事件后我们再回到要解决的问题[划分浏览器]。
判断IE浏览器
这似乎是一个老生常谈的问题，网络中有很多找那个方法，归类为两类：其一，是判断浏览器的功能属性。其二，就是判断传统的 user-agent 字符串，这可能是最古老也是最流行的检测方式。在这里就不做深入了解了，我们这里用一种比较简单的方法来判断
if(window.ActiveXObject) {& alert("IE");}else{& alert("NO");}
到目前为止我们遇到的问题就已经解决了，开始写代码来测试我们的思路是否能够实现。
完成代码：
&!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&
&html xmlns="http://www.w3.org/1999/xhtml"&
&head&
&meta http-equiv="Content-Type" content="text/ charset=gb2312" /&
&meta name="auther" content="fq" /&
&title&监听输入框值的即时变化 onpropertychange
oninput&/title&
&script type="text/javascript"&
function immediately(){
var element = document.getElementById("mytext");
if(window.ActiveXObject) {
element.onpropertychange = webC
}else{
element.addEventListener("input",webChange,false);
function webChange(){
if(element.value){document.getElementById("test").innerHTML = element.value};
}
&/script&
&/head&&body&
直接写在页面中的示例：
&input type="text" name="textfield" oninput="document.getElementById(&webtest&).innerHTML=this." onpropertychange="document.getElementById(&webtest&).innerHTML=this." /&
&div&您输入的值为：&span id="webtest"&还未输入&/span&&/div&
&br /&&br /&&br /&&br /&&br /&
写在JS中的示例：
&input type="text" name="textfield" id="mytext" /&
&div&您输入的值为：&span id="test"&还未输入&/span&&/div&
&script type="text/javascript"&
immediately();
&/script&
&/body&
&/html&
太漂亮了，一次完成，预览以上代码，页面中共实现两两种方式：第一、页面中直接引用；第二、JS中引用。经过测试，兼容：IE6、IE7、IE8、Firefox、Opera、Chrome、Safari
一、不得利用本站危害国家安全、泄露国家秘密，不得侵犯国家社会集体的和公民的合法权益，不得利用本站制作、复制和传播不法有害信息！
二、互相尊重，对自己的言论和行为负责。
本文标题：
本页链接：oninput,onpropertychange,onchange的使用方法和差别
时间： 21:00:36
&&&& 阅读：74
&&&& 评论：
&&&& 收藏：0
标签：&&&&&&&&&&&&&&&&&&&&&&&&&&&
&&& 因为工作须要，需实现一个相似于微博输入框的功能，在用户动态输入文字的时候，改动提示&您还能够输入XX字&。例如以下图所看到的：
因此，略微研究了一下oninput,onpropertychange,onchange的差别和使用方法，以及onpropertychange在ie浏览器下的一个bug。
2、oninput,onpropertychange,onchange的使用方法
lonchange触发事件必须满足两个条件：
a）当前对象属性改变，而且是由键盘或鼠标事件激发的（脚本触发无效）
b）当前对象失去焦点(onblur)；
lonpropertychange的话，仅仅要当前对象属性发生改变，都会触发事件，可是它是IE专属的；
loninput是onpropertychange的非IE浏览器版本号，支持firefox和opera等浏览器，但有一点不同，它绑定于对象时，并不是该对象全部属性改变都能触发事件，它仅仅在对象value值发生改变时奏效。
在textarea中，假设想捕获用户的键盘输入，用onkeyup检查事件就能够了，可是onkeyup并不支持复制和粘贴，因此须要动态监測textarea中值的变化，这就须要onpropertychange（用在IE浏览器）和oninput（非IE浏览器）结合在一起使用了。
3、代码实现：
第一种方法是直接写入textarea的onpropertychange和oninput属性
&textarea id="wb_comment_content" name="wb_comment_content" onblur="blur_wb_textarea(this);" onfocus="click_wb_textarea(this);" onpropertychange="set_alert_wb_comment();" oninput="set_alert_wb_comment();" class="gary666" style="font-size:12" mce_style="font-size:12"&欢迎您每天来微评爱车哦&&
假设想要用JavaScript设置textarea的属性，需例如以下：
document.getElementById("wb_comment_content").onpropertychange = set_alert_wb_comment();
else //须要用addEventListener来注冊事件
document.getElementById("wb_comment_content").addEventListener("input", set_alert_wb_comment, false);
function click_wb_textarea(obj)
if(obj.value==obj.defaultValue)
obj.value="";
//obj.className="";
//这样设置类名在ie下会有在输入第一个字符的时候onpropertychange不会触发的bug
obj.style.color="#000";
function blur_wb_textarea(obj)
if(obj.value=="")
//obj.className="gary666";
obj.style.color="#666";
obj.value= obj.defaultV
4、onpropertychange的bug
&&& 在代码实现时，发如今响应用户onclick了textarea时，假设使用obj.className="XX";来改变textarea输入框中字体的样式，会导致在ie下会有在输入第一个字符的时候onpropertychange不会触发的bug，因此须要这样设置：obj.style.color="#000";
标签：&&&&&&&&&&&&&&&&&&&&&&&&&&&
&&国之画&&&& &&
版权所有 京ICP备号-2
迷上了代码！&&& 因为工作须要，需实现一个相似于微博输入框的功能，在用户动态输入文字的时候，改动提示&您还能够输入XX字&。例如以下图所看到的：
因此，略微研究了一下oninput,onpropertychange,onchange的差别和使用方法，以及onpropertychange在ie浏览器下的一个bug。
2、oninput,onpropertychange,onchange的使用方法
lonchange触发事件必须满足两个条件：
a）当前对象属性改变，而且是由键盘或鼠标事件激发的（脚本触发无效）
b）当前对象失去焦点(onblur)；
lonpropertychange的话，仅仅要当前对象属性发生改变，都会触发事件，可是它是IE专属的；
loninput是onpropertychange的非IE浏览器版本号，支持firefox和opera等浏览器，但有一点不同，它绑定于对象时，并不是该对象全部属性改变都能触发事件，它仅仅在对象value值发生改变时奏效。
在textarea中，假设想捕获用户的键盘输入，用onkeyup检查事件就能够了，可是onkeyup并不支持复制和粘贴，因此须要动态监測textarea中值的变化，这就须要onpropertychange（用在IE浏览器）和oninput（非IE浏览器）结合在一起使用了。
3、代码实现：
第一种方法是直接写入textarea的onpropertychange和oninput属性
&textarea id="wb_comment_content" name="wb_comment_content" onblur="blur_wb_textarea(this);" onfocus="click_wb_textarea(this);" onpropertychange="set_alert_wb_comment();" oninput="set_alert_wb_comment();" class="gary666" style="font-size:12" mce_style="font-size:12"&欢迎您每天来微评爱车哦&&
假设想要用JavaScript设置textarea的属性，需例如以下：
document.getElementById("wb_comment_content").onpropertychange = set_alert_wb_comment();
else //须要用addEventListener来注冊事件
document.getElementById("wb_comment_content").addEventListener("input", set_alert_wb_comment, false);
function click_wb_textarea(obj)
if(obj.value==obj.defaultValue)
obj.value="";
//obj.className="";
//这样设置类名在ie下会有在输入第一个字符的时候onpropertychange不会触发的bug
obj.style.color="#000";
function blur_wb_textarea(obj)
if(obj.value=="")
//obj.className="gary666";
obj.style.color="#666";
obj.value= obj.defaultV
4、onpropertychange的bug
&&& 在代码实现时，发如今响应用户onclick了textarea时，假设使用obj.className="XX";来改变textarea输入框中字体的样式，会导致在ie下会有在输入第一个字符的时候onpropertychange不会触发的bug，因此须要这样设置：obj.style.color="#000";
阅读(...) 评论()