HTML5 oninput实时监听输入框值变化的完美方案
在网页开发中经常会碰到需要动态监听输入框值变化的情况，如果使用 onkeydown、onkeypress、onkeyup 这个几个键盘事件来监测的话，监听不了右键的复制、剪贴和粘贴这些操作，处理组合快捷键也很麻烦。因此这篇文章向大家介绍一种完美的解决方案：结合html5标准事件 oninput 和 IE 专属事件 onpropertychange 事件来监听输入框值变化。，对于检测 textarea, input:text, input:password 和 input:search 这几个元素通过用户界面发生的内容变化非常有用，在内容修改后立即被触发，不像 onchange 事件需要失去焦点才触发。主流浏览器基本都支持oninput事件，IE9以下不支持，需要使用 IE 特有的 onpropertychange 事件替代，这个事件在用户界面改变或者使用脚本直接修改内容两种情况下都会触发，有以下几种情况：
- 修改了 input:checkbox 或者 input:radio 元素的选择中状态， checked 属性发生变化。
- 修改了 input:text 或者 textarea 元素的值，value 属性发生变化。
- 修改了 select 元素的选中项，selectedIndex 属性发生变化。
在监听到onpropertychange事件后，可以使用 event 的 propertyName 属性来获取发生变化的属性名称。
集合 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 两个事件就可以了，示例代码如下：
$('input').on('input propertychange', function() {
alert($(this).val().length + ' characters');
});
HTML5 oninput实时监听输入框值变化的完美方案的更多相关文章
- 实时监听输入框值变化的完美方案：oninput & onpropertychange
实时监听输入框值变化的完美方案:oninput & onpropertychange: 网址:http://www.cnblogs.com/lhb25/archive/2012/11/30/o ...
- html5 实时监听输入框值变化的完美方案：oninput & onpropertychange
结合 HTML5 标准事件 oninput 和 IE 专属事件 onpropertychange 事件来监听输入框值变化. H5手机端: <input type="text" ...
- 【转载】实时监听输入框值变化的完美方案：oninput & onpropertychange
oninput 是 HTML5 的标准事件,对于检测 textarea, input:text, input:password 和 input:search 这几个元素通过用户界面发生的内容变化非常有 ...
- js/jquery 实时监听输入框值变化的完美方案：oninput & onpropertychange
(1) 先说jquery, 使用 jQuery 库的话,只需要同时绑定 oninput 和 onpropertychange 两个事件就可以了,示例代码: $('#username').bin ...
- jquery 实时监听输入框值变化的完美方案
只需要同时绑定 oninput 和 onpropertychange 两个事件,但是这并不完美 $('.input-form :input').bind('input propertychange', ...
- jquery实时监听输入框值变化
在做web开发时候很多时候都需要即时监听输入框值的变化,以便作出即时动作去引导浏览者增强网站的用户体验感.而采用onchange时间又往往是在输入框失去焦点(onblur)时候触发,有时候并不能满足条 ...
- 实时监听输入框值变化：oninput & onpropertychange
结合 HTML5 标准事件 oninput 和 IE 专属事件 onpropertychange 事件来监听输入框值变化. oninput 是 HTML5 的标准事件,对于检测 textarea, i ...
- js与jquery实时监听输入框值变化方法
本文实例讲述了js与jquery实时监听输入框值的oninput与onpropertychange方法.分享给大家供大家参考.具体如下: 最近做过一个项目,需求是下拉框里自动匹配关键字,具体细节是实时 ...
- Js/jQuery实时监听输入框值变化
前言 在做web开发时候很多时候都需要即时监听输入框值的变化,以便作出即时动作去引导浏览者增强网站的用户体验感.而采用onchange时间又往往是在输入框失去焦点(onblur)时候触发,有时候并不能 ...
随机推荐
- Atitit.你这些项目不都是模板吗？不是原创 集成和整合的方式大总结
Atitit.你这些项目不都是模板吗?不是原创 集成和整合的方式大总结 1.1. 乔布斯的名言:创新即整合(Creativity is just connecting things).1 1.2. ...
- SpringMVC 数据校验
1.引入jar包 2.配置验证器 <!-- 配置验证器 --> <bean id="myvalidator" class="org.springfram ...
- Openfire集群源码分析
如果用户量增加后为了解决吞吐量问题,需要引入集群,在openfire中提供了集群的支持,另外也实现了两个集群插件:hazelcast和clustering.为了了解情况集群的工作原理,我就沿着open ...
- CYQ.Data V5 从入门到放弃ORM系列：教程 - MProc类使用
MProc介绍 MProc:是一个用于执行SQL或存储过程的数据库操作类,它轻量高性能地类似于Dapper. MProc:它出现的场景很少,因为MAction自身就能处理掉90%-100%的数据操作( ...
- WinRT自定义控件第一 - 转盘按钮控件
之前的文章中,介绍了用WPF做一个转盘按钮控件,后来需要把这个控件移植到WinRT时,遇到了很大的问题,主要原因在于WPF和WinRT还是有很大不同的.这篇文章介绍了这个移植过程,由于2次实现的控件功 ...
- MongoDB安装与故障
下载完毕后 bin为官方代码 data为自行创建的文件夹 db存在数据 log存在日志 启动MongoDB 通过cmd到db的文件目录 通过mongod.exe代码执行data下的log文 ...
- 开源Word读写组件DocX 的深入研究和问题总结
一. 前言 前两天看到了asxinyu大神的[原创]开源Word读写组件DocX介绍与入门,正好我也有类似的自动生成word文档得需求,于是便仔细的研究了这个DocX. 我也把它融入到我的项目当中并进 ...
- 计算机程序的思维逻辑 (53) - 剖析Collections - 算法
之前几节介绍了各种具体容器类和抽象容器类,上节我们提到,Java中有一个类Collections,提供了很多针对容器接口的通用功能,这些功能都是以静态方法的方式提供的. 都有哪些功能呢?大概可以分为两 ...
- 第二章 consul的安装和启动
安装环境: mac:64bit(查看mac位数:打开终端-->"uname -a") consul_0.6.4_darwin_amd64.zip和consul_0.6.4_w ...
- 让我们山寨一张Windows Azure Global的壁纸
用过国际版Azure的同学都见过一个显示了机器中主要信息的壁纸,而这个壁纸是通过Sysinternals的一款叫做bginfo来实现的,这款软件的好处是对于批量管理主(虚拟)机的管理员和使用方都很实用 ...