javascript开发中使用onpropertychange,oninput事件解决onchange事件的不足
发布时间：2024-04-26 17:14:12
标签：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>
0
投稿猜你喜欢
本文主要介绍了python 边缘扩充方式的实现示例，具体如下：import cv2# big_pad=True：当目标图像高和宽均大于原图时- 我第一次接触爬虫这东西是在今年的5月份，当时写了一个博客搜索引擎，所用到的爬虫也挺智能的，起码比电影来了这个站用到的爬虫水平高多了！回到用P
- 如下所示：import matplotlib.pyplot as pltimport numpy as npx = [11422,11360
- QThread是Qt的线程类中最核心的底层类。由于PyQt的的跨平台特性，QThread要隐藏所有与平台相关的代码要使用的QThread开始
- matplotlib官方文档：https://matplotlib.org/stable/users/index.htmlmatplotli
- 前段时间嗷嗷有发过"好玩的放大镜效果",今天看了下,发现还有简单的方法也能够实现,即利用内外补丁的调整。有兴趣的可以在琢
- 前言最近项目中遇到用 SQL Server的程序，以前没用过这个数据库，于是尝试将其转换为 MySQL 的格式，可是不想在本地安装 SQL
- $forceUpdate()的使用在Vue官方文档中指出，$forceUpdate具有强制刷新的作用。那在vue框架中，如果data中有一个
- 很多web开发者或许都遇到过这样的问题，程序莫名奇怪出现“不能执行已释放Script的代码”，错误行1，列1.对于这种消息描述不着边，行列描
- 存储过程的功能非常强大，在某种程度上甚至可以替代业务逻辑层，接下来就一个小例子来说明，用存储过程插入或更新语句。1、数据库表结构所用数据库为
- 进程和线程的区别进程是对运行时程序的封装，是系统资源调度和分配的基本单位线程是进程的子任务，cpu调度和分配的基本单位，实现进程内并发。一个
- XML是一个精简的SGML，它将SGML的丰富功能与HTML的易用性结合到Web的应用中。XML保留了SGML的可扩展功能，这使XML从根本
- 外观模式（Facade Pattern）是什么外观模式是一种结构型模式，它提供了一个简单的接口，隐藏了系统的复杂性，为客户端提供了一个简单的
- 前言作为一个pythoner ,包的安装时必须懂的,这个语言跟matlab很类似，开源、共享，只要你有好的方法，都可以作为一个库，供大家下载
- 锁，在现实生活中是为我们想要隐藏于外界所使用的一种工具。在计算机中，是协调多个进程或县城并发访问某一资源的一种机制。在数据库当中，除了传统的
- 由于tornado内置的AsyncHTTPClient功能过于单一, 所以自己写了一个基于Tornado的HTTP客户端库, 鉴于自己多处使
- 安装paramiko后，看下面例子：import paramiko#设置ssh连接的远程主机地址和端口t=paramiko.Transpor
- 使用了pandas的Series方法绘制图像体验之后感觉直接用matplotlib的功能好用了不少，又试用了DataFrame的方法之后发现
- 一.问题描述当我们在做项目的时候，创建一张用户表，如何让该表的主键id从0开始自增？网上搜索了很多解决方案，最后发现了一种方法必实现且有效的
- 1、解决方法（1）忽视元组。缺少类别标签时，通常这样做(假设挖掘任务与分类有关)，除非元组有多个属性缺失值，否则该方法不太有效。当个属性缺值
