实时监听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>
浏览器支持:
| 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的变化:的更多相关文章
- jq 实时监听input输入框的变化
项目需求中有时候需要实时监测 input 的值变化,虽然 input 自身有 focus 和 blur 事件,但是有时候跟需求不符合. 所以实时监听 input 值变化的代码为: $("#i ...
- Js/jQuery实时监听input输入框值变化
前言在做web开发时候很多时候都需要即时监听输入框值的变化,以便作出即时动作去引导浏览者增强网站的用户体验感.而采用onchange时间又往往是在输入框失去焦点(onblur)时候触发,有时候并不能满 ...
- 实时监听input输入框value值的变化
1.js 的 oninput & onpropertychange JS中的 oninput 事件在 IE9 以下版本不支持,需要使用 IE 特有的 onpropertychange 事件替代 ...
- js实时监听input中值的变化
$(function(){ $('#inputid').bind('input propertychange', function() { // input 中的值 var params = $(th ...
- 实时监听input输入内容的N种方法
现在有一个需求,需要我们实时监听input输入框中的内容,从而带来更好的用户体验,而不是等我们全部输入完毕才告诉我们格式不对首先我们创建一个input输入框 <form name='loginF ...
- js监听input输入框值的实时变化实例
情景:监听input输入框值的实时变化实例 解决方法:1.在元素上同时绑定oninput和onporpertychanger事件 实例:<script type="text/JavaS ...
- js 实时监听input中值变化
注意:用到了jquery需要引入jquery.min.js. 需求: 1.每个地方需要分别打分,总分为100; 2.第一个打分总分为40; 3.第二个打分总分为60. 注意:需要判断null.&quo ...
- 使用jQuery实时监听input输入值的变化
//jQuery实时监听input值变化 $("#email").on("input propertychange",function(){ var str = ...
- 实时监听input输入的变化(兼容主流浏览器)【转】
遇到如此需求,首先想到的是change事件,但用过change的都知道只有在input失去焦点时才会触发,并不能满足实时监测的需求,比如监测用户输入字符数. 在经过查阅一番资料后,欣慰的发现firef ...
随机推荐
- ubuntu导入公钥的方法
导入公钥的办法: #方法1: gpg --keyserver subkeys.pgp.NET --recv 6E871C4A881574DEgpg --export --armor 6E871C4A8 ...
- Django Web项目部署参考
环境准备:1.Python 2.7.*]2.pip3.sudo pip install django4.sudo aptitude show python-setuptools5.sudo aptit ...
- 架构之Nginx(负载均衡/反向代理)
Nginx ("engine x") 是一个高性能的 HTTP 和 反向代理 服务器 ,也是一个 IMAP/POP3/SMTP 代理 服务器 . Nginx 是由 Igor Sys ...
- 设计一个卖不同种类车的4s店
# 定义奔驰车类 class BenchiCar(object): # 定义车的方法 def move(self): print('---奔驰车在移动---') def stop(self): pri ...
- 从一个微型例子看“C/C++的内存分配机制”和“数组变量名与指针变量名”(转)
C++的内存有五大分区:堆区.栈区.自由存储区.全局/静态存储区.常量存储区. 五个数据段:数据段.代码段.BSS段.堆.栈 内存分配方式有三种: 从静态存储区域分配.内存在程序编译的时候就已经分配好 ...
- 【转】javascript 浮点数运算问题
大多数语言在处理浮点数的时候都会遇到精度问题,但是在JS里似乎特别严重,来看一个例子 alert(45.6*13); 结果居然是592.800000000001,当然加法之类的也会有这个问题 那这是j ...
- 使用XHProf分析PHP性能瓶颈(二)
上一篇文章里,我们介绍了如何基于xhprof扩展来分析PHP性能,并记录到日志里,最后使用xhprof扩展自带的UI在web里展示出来.本篇文章将讲述2个知识点: 使用xhgui代替xhprof的默认 ...
- 在mac OX10.11.6上安装MySQL
一.之前失败情况 官网下载dmg文件安装.源码安装,下过5.6 5.7 8.0 版本,都可以安装成功,但是在电脑设置界面无法启动,每次点启动输入密码后,均闪一下绿色然后变红色,既然不能界面启动,那 ...
- 结构化您的Python工程
我们对于"结构化"的定义是您关注于怎样使您的项目最好地满足它的对象性,我们 需要去考虑如何更好地利用Python的特性来创造简洁.高效的代码.在实践层面, "结构化&qu ...
- Supported method argument types Spring MVC
Supported method argument types The following are the supported method arguments: Request or respons ...