javascript开发中使用onpropertychange,oninput事件解决onchange事件的不足
2015-07-29 16:01
701 查看
用onpropertychange,oninput事件解决onchange事件的不足,需要的朋友可以参考下:
onchange在用于文本框输入框时,有一个明显的不足. 事件不会随着文字的输入而触发,而是等到文本框失去焦点(onblur)时才会触发. 也就是没有即时性!
在IE下,可以用onpropertychange来代替onchange事件,当文本框有任何变化时,能立即触发此事件.
这样一来问题就解决了.
那其他浏览器呢,onpropertychange可是IE的专利. 接下来就是oninput事件了.
但是oninput有个诡异,必须用addEventListener的方式来绑定事件.否则无效.
好了, 以下是演示例子, 主流浏览器都没问题:
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>
相关文章推荐
- 静态Web开发 JavaScript
- js 之prototype 理解
- js判断undefined类型,undefined,null,NaN的区别
- javascript array sort()
- jsp学习笔记
- js将时间戳转换为日期类型
- js Date 日期格式化
- js深入理解(一)
- 用js实现返回上一页
- bzoj1013: [JSOI2008]球形空间产生器sphere
- 04-Js给action传值,出现乱码如何解决
- ExtJs 4.2 TabCloseMenu.js的Bug
- JS代码片段:判断一个元素是否进入可视区域
- ExtJS4.2 cellclick获取单元格内容
- js中event.keyCode用法及keyCode对照表
- js的压缩与混淆
- XML json map list转换
- javascript字符串函数
- ECharts——纯Javascript的图表库
- JS 正则表达式用法