实时监听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 ...
随机推荐
- 微服务架构的基础框架选择:Spring Cloud还是Dubbo?
最近一段时间不论互联网还是传统行业,凡是涉及信息技术范畴的圈子几乎都在讨论微服务架构.近期也看到各大技术社区开始组织一些沙龙和论坛来分享Spring Cloud的相关实施经验,这对于最近正在整理Spr ...
- Sec site list
Seclist: 英语: http://seclists.org/ http://www.securityfocus.com/ http://www.exploit-db.com/ http ...
- java面试题,附个人理解答案
一,面向对象的特征:1.抽象 包括数据抽象跟行为抽象,将对象共同的特征取出形成一个类2.继承 被继承类为基类/超类,继承类为子类/派生类3.封装 多次使用道德数据或方法,封装成类,方便多次重复调用4. ...
- JWT实现用户权限认证
网上的java基础教程曾教会我们,将用户登录信息存在session(服务器端)中,需要验证的时候拿出来作对比以达到身份 验证的效果.但这种方式暴露的问题也是可想而知的: 1.Seesion:每次认证用 ...
- 让 Homebrew 走代理更新 + brew 管理 node 版本
0.前言 环境:MacOS 背景:整理下今天所做的配置. 1. 让 Homebrew 走代理更新 brew update 就卡住了,即使开了 shadowsocks 也不行.因为 shadowsock ...
- birt4.6部署到tomcat及启动服务报错解决方法
一.下载birt-runtime-4.6.0-20160607.zip包 解压后birt-runtime-4.6.0-20160607\WebViewerExample将WebViewerExampl ...
- Maven手动添加jar包
有的jar在Maven中找不到则需要手动添加(如ojdbc14.jar) 方法如下: 一.将你要添加的jar包放到指定目录(在该目录下打开命令窗口) 二.输入指令:mvn install:instal ...
- Servlet知识点总结
一, ServletAPI中有4个Java包: 1.javax.servlet:其中包含定义Servlet和Servlet容器之间契约的类和接口 2.javax.servlet.http:其中包含定义 ...
- linux 文件传输 SCP
SCP :secure copy (remote file copy program) 也是一个基于SSH安全协议的文件传输命令.与sftp不同的是,它只提供主机间的文件传输功能,没有文件管理的功能. ...
- IDEA设置生成带注释的getter和setter解决方案 (图文教程)
近日在研究重构代码的时候有用到idea的不少插件,比如CheckStyle,同时下载了阿里的开发规约,收到不少启发. 规约中会要求所有的方法都有Javadoc,但是通常我们用idea默认生成的gett ...