javascript开发中使用onpropertychange,oninput事件解决onchange事件的不足

ttx9n · 发表于 2010-11-14 19:32:17

用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>
[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

shw5ovr · 发表于 2022-10-14 14:04:11

看看看看

shw5ovr · 发表于 2022-12-8 02:46:05

感谢楼主分享

溪谷玉贤 · 发表于 2023-8-6 23:09:10

好东西一定要看看！

fiyeid · 发表于 2023-8-21 13:03:53

大家都不容易！

dm00ji1s · 发表于 2023-9-13 16:38:16

哈哈哈哈哈哈

e8hwl6prw · 发表于 2023-10-15 04:54:20

下载来瞧瞧

wangdj110 · 发表于 2023-10-18 15:03:27

。。。。。。。。。。。。。。。

z80vh · 发表于 2023-11-12 07:56:14

谢谢您的分享！

3pjdk29w · 发表于 2024-5-23 18:21:24

。。。。。。。。。。。。。。。

账号		自动登录	找回密码
密码			立即注册

[JavaScript] javascript开发中使用onpropertychange,oninput事件解决onchange事件的不足

相关帖子