您现在的位置:首页 --> JavaScript --> 用onpropertychange,oninput事件解决onchange事件的不足
用onpropertychange,oninput事件解决onchange事件的不足
浏览:1383次 出处信息
用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> |
QQ技术交流群:445447336,欢迎加入!
扫一扫订阅我的微信号:IT技术博客大学习
扫一扫订阅我的微信号:IT技术博客大学习
<< 前一篇:js中String的常用扩展
后一篇:jQuery性能优化指南 >>
文章信息
- 作者:koyoz 来源: koyoz's blog
- 标签: onchange oninput onpropertychange
- 发布时间:2009-11-15 18:27:14
近3天十大热文
- [66] Go Reflect 性能
- [65] Oracle MTS模式下 进程地址与会话信
- [64] 如何拿下简短的域名
- [59] android 开发入门
- [59] IOS安全–浅谈关于IOS加固的几种方法
- [58] 图书馆的世界纪录
- [58] 【社会化设计】自我(self)部分――欢迎区
- [53] 视觉调整-设计师 vs. 逻辑
- [47] 界面设计速成
- [46] 读书笔记-壹百度:百度十年千倍的29条法则