http://www.koyoz.com/blog/?action=show&id=225
用onpropertychange,oninput事件解决onchange事件的不足.
onchange在用于文本框输入框时,有一个明显的不足. 事件不会随着文字的输入而触发,而是等到文本框失去焦点(onblur)时才会触发. 也就是没有即时性!
在IE下,可以用onpropertychange来代替onchange事件,当文本框有任何变化时,能立即触发此事件.
这样一来问题就解决了.
那其他浏览器呢,onpropertychange可是IE的专利. 接下来就是oninput事件了.
但是oninput有个诡异,必须用addEventListener的方式来绑定事件.否则无效.
好了, 以下是演示例子, 主流浏览器都没问题:
<!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/html; charset=utf-8" /> <title>on用onpropertychange,oninput事件解决onchange事件的不足 by koyoz.com</title> <style type="text/css"> *{font-size:14px;font-family:'Comic Sans MS', Verdana} body {margin-left:20px} </style> </head> <body> <p>使用onchange事件: </p> <input type="text" id="txt1" /> <p>使用onpropertychange/oninput事件: </p> <input type="text" id="txt2" /> <p>结果:</p> <input type="text" id="txt" /> <script type="text/javascript"> var $ = function(o) { return document.getElementById(o) }; $('txt1').onchange = function() { $('txt').value = this.value; } $('txt2').onpropertychange = function() { $('txt').value = this.value; } if (window.addEventListener) { $('txt2').addEventListener('input', function() {$('txt').value = this.value}, false); } </script> </body> </html>
相关推荐
onchange在用于文本框输入框时,有一个明显的不足....但是oninput有个诡异,必须用addEventListener的方式来绑定事件.否则无效. 好了, 以下是演示例子, 主流浏览器都没问题: on用onpropertychange,oni
oninput,onpropertychange,onchange的用法和区别
NULL 博文链接:https://xuedong.iteye.com/blog/1144739
onpropertychange能够捕获每次输入值的变化。例如:对象的value值被改变时,onpropertychange能够捕获每次改变,而onchange需要执行某个事件才可以捕获。
1. onchange事件与onpropertychange事件的区别: onchange事件在内容改变(两次内容有可能相等)且失去焦点时触发...onpropertychange事件是任何属性改变都会触发,而oninput却只在value改变时触发,oninput要通过addEv
要达到的效果 很多情况下我们都会即时监听输入框值的变化,以便作出即时动作去引导浏览者... onchange在属性值改变时还必须使得当前元素失去焦点(onblur)才可以激活该事件。 了解这一点后我们发现onpropertychange的
当一个HTML元素的属性改变的时候,都能通过onpropertychange来捕获。例如< input name=”text1″ id=”text1″ />对象的value属性被页面的脚本修改的...firefox的事件oninput,效果和IE的onproperchange相同。
1.onchange 及其onpropertychange,oninput 在IE下可使用onpropertychangel立即触发监听, oninput 可以使用在FF下,但必须使用w3c推荐的addEventListener的方式来绑定事件. //www.jb51.net/article/25275.htm2. <...
想要实现的功能大概是这样的: 有两个文本框,其中一个只读,另一个可以输入。要求在可输入文本框中输入文本时,只读文本框能够获得输入的值,且只读文本框旁边出现... 这时,在网上找到了onpropertychange事件。该事