【转载】实时监听输入框值变化的完美方案：oninput & onpropertychange
oninput 是 HTML5 的标准事件，对于检测 textarea, input:text, input:password 和 input:search 这几个元素通过用户界面发生的内容变化非常有用，在内容修改后立即被触发，不像 onchange 事件需要失去焦点才触发。oninput 事件在主流浏览器的兼容情况如下：
从上面表格可以看出，oninput 事件在 IE9 以下版本不支持，需要使用 IE 特有的 onpropertychange 事件替代，这个事件在用户界面改变或者使用脚本直接修改内容两种情况下都会触发，有以下几种情况：
- 修改了 input:checkbox 或者 input:radio 元素的选择中状态， checked 属性发生变化。
- 修改了 input:text 或者 textarea 元素的值，value 属性发生变化。
- 修改了 select 元素的选中项，selectedIndex 属性发生变化。
在监听到 onpropertychange 事件后，可以使用 event 的 propertyName 属性来获取发生变化的属性名称。
event.srcElement指定发生事件的对象
集合 oninput & onpropertychange 监听输入框内容变化的示例代码如下：
<head>
<script type="text/javascript">
// Firefox, Google Chrome, Opera, Safari, Internet Explorer from version 9
function OnInput (event) {
alert ("The new content: " + event.target.value);
}
// Internet Explorer
function OnPropChanged (event) {
if (event.propertyName.toLowerCase () == "value") {
alert ("The new content: " + event.srcElement.value);
}
}
</script>
</head>
<body>
Please modify the contents of the text field.
<input type="text" oninput="OnInput (event)" onpropertychange="OnPropChanged (event)" value="Text field" />
</body>
使用 jQuery 库的话，只需要同时绑定 oninput 和 onpropertychange 两个事件就可以了，示例代码如下：
$('textarea').bind('input propertychange', function() {
$('.msg').html($(this).val().length + ' characters');
});
【转载】实时监听输入框值变化的完美方案：oninput & onpropertychange的更多相关文章
- 实时监听输入框值变化的完美方案：oninput & onpropertychange
实时监听输入框值变化的完美方案:oninput & onpropertychange: 网址:http://www.cnblogs.com/lhb25/archive/2012/11/30/o ...
- HTML5 oninput实时监听输入框值变化的完美方案
在网页开发中经常会碰到需要动态监听输入框值变化的情况,如果使用 onkeydown.onkeypress.onkeyup 这个几个键盘事件来监测的话,监听不了右键的复制.剪贴和粘贴这些操作,处理组合快 ...
- html5 实时监听输入框值变化的完美方案：oninput & onpropertychange
结合 HTML5 标准事件 oninput 和 IE 专属事件 onpropertychange 事件来监听输入框值变化. H5手机端: <input type="text" ...
- js/jquery 实时监听输入框值变化的完美方案：oninput & onpropertychange
(1) 先说jquery, 使用 jQuery 库的话,只需要同时绑定 oninput 和 onpropertychange 两个事件就可以了,示例代码: $('#username').bin ...
- jquery 实时监听输入框值变化的完美方案
只需要同时绑定 oninput 和 onpropertychange 两个事件,但是这并不完美 $('.input-form :input').bind('input propertychange', ...
- 监听输入框值变化的最佳方案 oninput 和 onpropertychange (实时监控文本框改变的最佳方案)
公司有个文本框,当输入文字/粘贴/复制 或者是键盘猛按的时候,都希望这个文本框能统计出 输入了多少字 这种用 onchange onkeyup onkepress 都不怎么好使 最后在 ...
- jquery实时监听输入框值变化
在做web开发时候很多时候都需要即时监听输入框值的变化,以便作出即时动作去引导浏览者增强网站的用户体验感.而采用onchange时间又往往是在输入框失去焦点(onblur)时候触发,有时候并不能满足条 ...
- js与jquery实时监听输入框值变化方法
本文实例讲述了js与jquery实时监听输入框值的oninput与onpropertychange方法.分享给大家供大家参考.具体如下: 最近做过一个项目,需求是下拉框里自动匹配关键字,具体细节是实时 ...
- 实时监听输入框值变化：oninput & onpropertychange
结合 HTML5 标准事件 oninput 和 IE 专属事件 onpropertychange 事件来监听输入框值变化. oninput 是 HTML5 的标准事件,对于检测 textarea, i ...
随机推荐
- python有超时的windows系统时间设置代码
手边的笔记本用久了,cmos电池可能又没电了.每次开机时间都不对,导致访问一些有https的网页会出现警告信息. 于是找了找通过python脚本设置系统时间的方法,发现了两种,其一是调用socket直 ...
- C语言基础（一）
7744问题(输出所有形如aabb的4位完全平方数) 方法1: #include<stdio.h> #include<math.h> int main (){ ;a<=; ...
- 3357: [Usaco2004]等差数列
3357: [Usaco2004]等差数列 Time Limit: 10 Sec Memory Limit: 128 MBSubmit: 321 Solved: 153[Submit][Statu ...
- Struts2 Interceptor学习
Interceptor的设计思想,其实是Spring里面的AOP思想,尽管Struts2又有自己的Interceptor但是,在实际开发中,用的较少,SSH整合之后你可以采用AOP事务处理进行拦截,更 ...
- JS系列——Linq to js使用小结
前言:前面几篇介绍了下C#基础技术中的几个:反射.特性.泛型.序列化.扩展方法.Linq to Xml等,本来还有两三个知识点没有写完,比如委托.多线程.异步等,后面会陆续将它们补起来,以便作为一套完 ...
- 谈谈我的windows服务器运维管理
我们开发的页游General War(http://gw.gamebox.com)上线运营也有半年多了,服务器的开发到运维基本都由我一手包办,在服务器上线之后我们又招了一个程序员接手后续功能的开发,而 ...
- 格雷码原理与Verilog实现
格雷码原理 格雷码是一个叫弗兰克*格雷的人在1953年发明的,最初用于通信.格雷码是一种循环二进制码或者叫作反射二进制码.格雷码的特点是从一个数变为相邻的一个数时,只有一个数据位发生跳变,由于这种特点 ...
- iOS地图 -- 区域监听的实现和小练习
区域监听用到的方法 [self.mgr startMonitoringForRegion:region]; --> 开启区域监听,没有返回值,在代理方法中得到信息并且处理信息 注:该方法只有用户 ...
- java类的初始化块／执行顺序，实例化对象数据赋值
java里初始化一个类的对象,通过初始化快或者构造方法进行数据赋值.与其相关的执行代码有这么几种: 静态初始化块 初始化块 构造方法 静态初始化块 静态初始化块只在类加载时执行一次,同时静态初始化块只 ...
- a版本冲刺第六天
队名:Aruba 队员: 黄辉昌 李陈辉 林炳锋 鄢继仁 张秀锋 章 鼎 学号 昨天完成的任务 今天做的任务 明天要做的任务 困难点 体会 408 学习<第一行代码> 学习活动的消息 ...