实时监听input输入框value的变化:

HTML5 标准事件 oninput 和 IE 专属事件 onpropertychange 事件实时监听输入框value的变化

oninput 事件在用户输入时触发。

该事件在 <input> 或 <textarea> 元素的值发生改变时触发。

提示: 该事件类似于 onchange 事件。不同之处在于 oninput 事件在元素值发生变化是立即触发 onchange 在元素失去焦点时才会触发。另外一点不同是 onchange 事件也可以作用于 <keygen> 和 <select> 元素。

oninput 支持的HTML标签:<input type="password"><input type="search"><input type="text"><textarea>

浏览器支持:

ChromefireFoxSafariIEOpera
Yes4.0 5.0 9.0 Yes

 

 


示例:

HTML:<input type="text" oninput="onInput()">JavaScript:<script type="text/javascript">function onInput() {console.log("正在输入...");}</script>或HTML:<input type="text">JavaScript:<script type="text/javascript">var oInput = document.querySelector("input");oInput.oninput = function () {console.log("正在输入...");};</script>或HTML:<input type="text">JavaScript:<script type="text/javascript" src="jquery.min.js"></script><script type="text/javascript">$("input").on("input", function () {console.log("正在输入...");});</script><script type="text/javascript">// 同时绑定 input propertychange$('input').bind('input propertychange', function() {console.log("正在输入...");});</script>

 


更多专业前端知识,请上 【猿2048】www.mk2048.com

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/363290.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

dubbo和zookeeper的关系

转载前言&#xff1a;网络上很多教程没有描述zookeeper和dubbo到底是什么关系、分别扮演了什么角色等信息&#xff0c;都是说一些似是而非的话&#xff0c;这里终于找到一篇文章&#xff0c;比较生动地描述了注册中心和微服务框架之间的关系&#xff0c;以及他们之间的合作分工…

测试Hibernate的最低配置

介绍 在上一篇文章中&#xff0c;我宣布了我打算创建个人Hibernate课程的意图。 首先要做的是最小的测试配置。 这些示例与Hibernate 4有关。 您只需要休眠 在实际的生产环境中&#xff0c;您不会单独使用Hibernate&#xff0c;因为您可以将其集成到JEE或Spring容器中。 要测试…

批处理:修改COM端口号

发现万能的WMI居然没有实现修改COM端口号的方法&#xff0c;不过用来遍历端口信息还是可以的&#xff0c;参考http://msdn.microsoft.com/en-us/library/aa394413(vvs.85).aspx。 没有办法只能通过修改注册表的方式来实现&#xff0c;下面献上代码&#xff0c;自己看吧&#xf…

真是无语

今天是我们有个女同事为了在我们的网站上传一个图片&#xff0c;她从昨天一直传到今天&#xff0c;这张图片都没有传上去。她给一个技术员说了&#xff0c;别人对她说可能是你电脑的问题&#xff0c;还可能是你IE有问题&#xff0c;因为技术员上传一张图片能传上去&#xff0c;…

2.2 .this的绑定规则

2.this的绑定规则 1.默认绑定 1 function foo( )2 {3 console.log(this.a);4 }5 var a1;6 foo(); //1 在代码中&#xff0c;foo()函数不带任何修饰的引用进行调用的&#xff0c;那么只能使用默认绑定。 2.隐式绑定 1 function foo1()2 {3 console.log( this.a );4…

Flink学习(二)Flink中的时间

摘自Apache Flink官网 最早的streaming 架构是storm的lambda架构 分为三个layer batch layerserving layerspeed layer一、在streaming中Flink支持的通知时间 Flink官网写了个了解streaming和各种时间的博客 https://www.oreilly.com/ideas/the-world-beyond-batch-streaming-1…

RSS阅读器使用:ROME,Spring MVC,嵌入式Jetty

在这篇文章中&#xff0c;我将展示一些创建Spring Web应用程序的准则&#xff0c;使用Jetty以及使用名为ROME的外部库运行RSS来运行它。 一般 我最近创建了一个示例Web应用程序&#xff0c;充当RSS阅读器。 我想检查ROME以阅读RSS。 我还想使用Spring容器和MVC创建最简单的视图…

HZOJ string

正解炸了…… 考试的时候想到了正解&#xff0c;非常高兴的打出来了线段树&#xff0c;又调了好长时间&#xff0c;对拍了一下发现除了非常大的点跑的有点慢外其他还行。因为复杂度算着有点高…… 最后正解死于常数太大……旁边的lyl用同样的算法拿了90分我却拿了个暴力的分40……

Unity3D入门其实很简单

在上次发布拙作后&#xff0c;有不少童鞋询问本人如何学习Unity3D。本人自知作为一名刚入门的菜鸟&#xff0c;实在没有资格谈论这么高大上的话题&#xff0c;生怕误导了各位。不过思来想去&#xff0c;决定还是写一些自己的经验&#xff0c;如果能给想要入门U3D的您一些启发&a…

4. HTML表单标签

表单是网页中最常见的元素&#xff0c;也是用户和我们交互的重要手段&#xff0c;在网站中的登录、注册、信息更新这些功能都是依赖表单实现的。在HTML中对于表单提供了一系列的标签&#xff0c;即输入框、下拉框、按钮、文本域&#xff0c;如下是一个最常见的表单结构内容&…

Java 8默认方法可能会破坏您的(用户)代码

乍一看&#xff0c; 默认方法为Java虚拟机的指令集带来了一个很棒的新功能。 最后&#xff0c;库开发人员能够开发已建立的API&#xff0c;而不会对其用户代码造成不兼容性。 使用默认方法&#xff0c;当将新方法引入该接口时&#xff0c;任何实现库接口的用户类都会自动采用默…

ADO.NET之使用DataSet类更新数据库

1.首先从数据库获得数据填充到DataSet类&#xff0c;该类中的表和数据库中的表相互映射。 2.对DataSet类中的表进行修改&#xff08;插入&#xff0c;更新&#xff0c;删除等&#xff09; 3.同步到数据库中&#xff1a;使用SqlDataAdapter实例名.Update(DataSet实例名&#xff…

CSS完美兼容IE6/IE7/FF的通用方法

关于CSS对各个浏览器兼容已经是老生常谈的问题了, 网络上的教程遍地都是.以下内容没有太多新颖, 希望能对初学者有一定的帮助.一、CSS HACK 以下两种方法几乎能解决现今所有HACK. 1, !important 随着IE7对!important的支持, !important 方法现在只针对IE6的HACK.(注意写法.记得…

学习进度

这一周学习了第四章登录&#xff0c;第五章系统业务逻辑没有完成上周规定的四五六章&#xff0c;因为发现有些以前看的东西现在没印象了&#xff0c;又看了一些之前的。 在代码上完成了老师布置的代码&#xff0c;第一个是判断AB和C的关系 &#xff0c;第二个是成绩排名&#x…

为Lucene选择快速唯一标识符(UUID)

大多数使用Apache Lucene的搜索应用程序都会为每个索引文档分配唯一的ID&#xff08;即主键&#xff09;。 尽管Lucene本身不需要这样做&#xff08;它可能不太在乎&#xff01;&#xff09;&#xff0c;但应用程序通常需要它以后通过其外部ID替换&#xff0c;删除或检索该文档…

ubuntu16.04设置静态ip

最近在课堂上&#xff0c;有很多同学反映在搭建环境的时候&#xff0c;虚拟机ip经常变&#xff0c;那么我们配置好的web服务可能就不能用了。下面讲一下如何在ubuntu上面设置静态ip 1&#xff1a;首先我们确认一下ubuntu的版本 cat /etc/issue 或者sudo lsb_release -a或者unam…

css布局:块级元素的居中

一.定宽&#xff1a; 1.定位居中(absolute) 方法一&#xff1a; html:<div class"main"></main>css:.main{width:400px;height:200px;background:#eee;position:absolute;left:50%;top:50%;margin-left:-200px;margin-top:-100px;} 方法二&#xff1a;…

精准客户数据服务

详情请点击&#xff1a;http://www.rulingtech.com 客户数据&#xff08;名录&#xff09;是市场营销活动不可或缺的重要资料。目前企业采用的客户名录数据主要通过订购黄页、购买第三方名录、自行搜集等途径。这些方式面临的问题是&#xff1a;数据重复度高、有效性差、准确率…

Maven常用的构建命令

Maven常用命令&#xff1a; Maven库&#xff1a; http://repo2.maven.org/maven2/ Maven依赖查询&#xff1a; http://mvnrepository.com/ 一&#xff0c;Maven常用命令&#xff1a; 1. 创建Maven的普通Java项目&#xff1a; mvn archetype:create-DgroupIdpackageName-Dartifa…

JPA 2.1实体图–第1部分:命名实体图

延迟加载通常是JPA 2.0的问题。 如果要使用FetchType.LAZY&#xff08;默认&#xff09;或FetchType.EAGER来加载关系&#xff0c;则必须在实体上进行定义&#xff0c;并且始终使用此模式。 仅当我们要始终加载关系时才使用FetchType.EAGER。 FetchType.LAZY几乎在所有情况下都…