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. 移动App开发基本技术面

    1.UI布局 1.1.熟悉系统布局基本机制和使用方法 2.界面效果 2.1.熟悉系统提供的所有界面组件 2.2.熟悉各种功能界面效果的实现途径 2,3.动画等特殊UI效果的实现机制 3.网络请求 3. ...

  2. Postgresql 启动could not create listen socket for "localhost"错误的解决

    新装的postgresql在第一次启动时可能会遇到错误,日志中的记录是: could not create listen socket for "localhost" 到/etc/ ...

  3. 使用 CSS3 实现 3D 图片滑块效果

    Slicebox – A fresh 3D image slider with graceful fallback 英文原文地址:http://tympanus.NET/codrops/2011/09 ...

  4. Python自学编程开发路线图(文中有免费资源)

    Python核心编程 免费视频资源<Python入门教程>:http://yun.itheima.com/course/145.html Python 基础学习大纲 所处阶段 主讲内容 技 ...

  5. VueJs(9)---vue-router(进阶1)

    vue-router 本文是基于官网学习,官网具体学习目录:vue-router 一.安装 基于vue-cli脚手架安装还是蛮简单的:在文件当前目录下运行: npm install vue-route ...

  6. NewLife.Net——构建可靠的网络服务

    网络程序应该注册成为系统服务,以保证其自启动以及稳定可靠运行! 这一场,讲讲怎么建立一个生产级别的网络服务. 老规矩,先上源码:https://github.com/nnhy/NewLife.Net. ...

  7. java中面试可能会问的问题

    为了明年的面试,把面试中可能遇到的关于java的问题记录在下面,纯个人理解,如果有误,请指正! 1.java中拷贝的三种方式,以及他们的区别. 这三种方式分别是:直接赋值,浅拷贝,深拷贝.第一种直接赋 ...

  8. 利用webmagic获取天猫评论

    引言 爬取商品信息 爬取商品评论 数据清洗 1. 引言 现代网页往往其HTML只有基本结构,而数据是通过AJAX或其他方法获取后填充,这样的模式对爬虫有一定阻碍,但是熟练以后获取并不困难,本文以爬取天 ...

  9. Django rest framework源码分析(3)----节流

    目录 Django rest framework(1)----认证 Django rest framework(2)----权限 Django rest framework(3)----节流 Djan ...

  10. StringBuffer与StringBuilder

    有些时候,需要由较短的字符串构建字符串.比如,按键或来自文件中的单词.采用字符串连接的方式达到此目的效率比较低.每次连接字符串的时候,都会构建一个新的String对象,既耗时,又浪费空间.使用Stri ...