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>

浏览器支持:

Chrome fireFox Safari IE Opera
Yes 4.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>
 

实时监听input输入框value的变化:的更多相关文章

  1. jq 实时监听input输入框的变化

    项目需求中有时候需要实时监测 input 的值变化,虽然 input 自身有 focus 和 blur 事件,但是有时候跟需求不符合. 所以实时监听 input 值变化的代码为: $("#i ...

  2. Js/jQuery实时监听input输入框值变化

    前言在做web开发时候很多时候都需要即时监听输入框值的变化,以便作出即时动作去引导浏览者增强网站的用户体验感.而采用onchange时间又往往是在输入框失去焦点(onblur)时候触发,有时候并不能满 ...

  3. 实时监听input输入框value值的变化

    1.js 的 oninput & onpropertychange JS中的 oninput 事件在 IE9 以下版本不支持,需要使用 IE 特有的 onpropertychange 事件替代 ...

  4. js实时监听input中值的变化

    $(function(){ $('#inputid').bind('input propertychange', function() { // input 中的值 var params = $(th ...

  5. 实时监听input输入内容的N种方法

    现在有一个需求,需要我们实时监听input输入框中的内容,从而带来更好的用户体验,而不是等我们全部输入完毕才告诉我们格式不对首先我们创建一个input输入框 <form name='loginF ...

  6. js监听input输入框值的实时变化实例

    情景:监听input输入框值的实时变化实例 解决方法:1.在元素上同时绑定oninput和onporpertychanger事件 实例:<script type="text/JavaS ...

  7. js 实时监听input中值变化

    注意:用到了jquery需要引入jquery.min.js. 需求: 1.每个地方需要分别打分,总分为100; 2.第一个打分总分为40; 3.第二个打分总分为60. 注意:需要判断null.&quo ...

  8. 使用jQuery实时监听input输入值的变化

    //jQuery实时监听input值变化 $("#email").on("input propertychange",function(){ var str = ...

  9. 实时监听input输入的变化(兼容主流浏览器)【转】

    遇到如此需求,首先想到的是change事件,但用过change的都知道只有在input失去焦点时才会触发,并不能满足实时监测的需求,比如监测用户输入字符数. 在经过查阅一番资料后,欣慰的发现firef ...

随机推荐

  1. tensorflow1.0.0 弃用了几个operator写法

    除法和取模运算符(/, //, %)现已匹配 Python(flooring)语义.这也适用于 tf.div 和 tf.mod.为了获取强制的基于整数截断的行为,你可以使用 tf.truncatedi ...

  2. 用C++实现一个不能被继承的类

    #include<iostream> using namespace std; class Gradpa { friend class Parent;//声明public或者private ...

  3. Page.ClientScript.RegisterStartupScript用法小结

    使用类型.键.脚本文本和指示是否添加脚本标记的布尔值向 Page 对象注册启动脚本. 参数 type 要注册的启动脚本的类型. key 要注册的启动脚本的键. script 要注册的启动脚本文本. a ...

  4. 3d轮播图——类似酷狗的轮播

    说到轮播图,其实只要是跟web开发相关的无论是前端后端应该都不陌生,各种各样的轮播图,从以前的单纯的平面山水画遮盖滑动或滚动,到Jquery的animate甚至是h5+css3,各种炫酷的轮播图更是层 ...

  5. maven工程,java代码加载resources下面资源文件的路径

    1 通过类加载器加载器, 1. URL resource = TestMain.class.getResource("/18500228040.txt");File file = ...

  6. 关于mui 中popover与下拉刷新冲突问题

    最近用mui做app混合式开发时,作为一个后端开发,高前端确实有点吃了,期间遇到的问题肯定也不少.这两天app做更新,为了装逼,将更新的提示搞得好看些,用到了mui中的popover,结果把自己整死了 ...

  7. Spring Security-- 验证码功能的实现

    spring security4 添加验证码 http://www.itwendao.com/article/detail/165400.html http://www.itdadao.com/art ...

  8. Hbase中HMaster作用

    HMaster在功能上主要负责Table表和HRegion的管理工作,具体包括: 1.管理用户对Table表的增.删.改.查操作: 2.管理HRegion服务器的负载均衡,调整HRegion分布: 3 ...

  9. 学会这15点,让你分分钟拿下Redis数据库

    1.Redis简介 REmote DIctionary Server(Redis) 是一个由Salvatore Sanfilippo写的key-value存储系统.Redis是一个开源的使用ANSI ...

  10. php自带验证邮箱 url ip函数

    以前用PHP验证邮箱.URL.IP是否合法都是通过自己写正则来实现,但是有时候脑子发昏,可能会写出一个不是完全正确的正则,导致验证出错,今天发现原来PHP本身自带了验证邮箱.URL.IP是否合法的函数 ...