javascript开发中使用onpropertychange,oninput事件解决onchange事件的不足
时间：2024-04-26 17:14:12
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>
标签：onpropertychange,oninput,onchange
0
投稿猜你喜欢
vuejs事件中心管理组件间的通信详解
2024-05-22 10:44:27
Django drf分页器的使用详解
2022-04-09 08:23:35
ASP实现上传图片到数据库
2007-09-21 12:59:00
你真的知道怎么优化SQL吗
2024-01-23 02:59:23
Python实现简易五子棋游戏
2023-02-04 07:02:22
Python 通配符删除文件的实例
2022-04-24 03:00:22
MYSQL定时清除备份数据的具体操作
2024-01-21 02:47:19
使用python将图片改为灰度图或黑白图
2023-04-17 12:28:52
JS性能优化笔记搜索整理
2024-04-17 09:54:55
python 匹配url中是否存在IP地址的方法
2023-04-13 14:29:08
Python3使用PyQt5制作简单的画板/手写板实例
2022-01-11 15:21:30
VS Code安装go插件失败原因分析以及解决方案
2024-04-26 17:24:08
JavaScript Try...Catch 声明的 使用方法
2024-04-18 10:52:21
pyhton学习与数据挖掘self原理及应用分析
2023-07-04 23:19:11
用python实现简单EXCEL数据统计的实例
2021-12-30 09:59:01
JavaScript中定义函数的三种方法
2024-05-09 10:37:04
django之常用命令详解
2023-02-04 07:25:19
Google 地图API Map()构造器详解
2024-05-05 09:29:04
MAC版修改MySQL初始密码的方法
2024-01-19 03:19:56
爬山算法简介和Python实现实例
2023-08-10 04:56:29