js使用onpropertychange,oninput事件解决onchange事件的不足
用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=gb2312" />
<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>
相关文章
- 收集js map框架(2011-7-25 13:35:37)
- Google提供的jQuery 怎么使用？(2011-7-18 17:3:19)
- JS对象模型-执行模型(2011-7-11 16:20:46)
- 调用IE7 JS Library库巧解IE兼容性问题(2011-7-11 16:13:49)
- 使用jquery图片延迟加载插件jquery.lazyload实现图片延迟加载提高网站打开速度(2011-6-20 11:21:58)
- 浅析Node.js：一个“编码就绪”服务器(2011-6-17 9:26:10)
- 【信息图表】Javascript框架和jQuery(2011-6-17 9:23:45)
- 用于图片处理的10个超级jQuery插件(2011-6-17 9:22:37)
- 【精】COOKIE用法(2011-6-14 16:46:13)
- 巧用XML+XSLT+CSS+JQuery创建Asp.Net网站（二）(2011-6-14 14:30:3)
