在网页开发中经常会碰到需要动态监听输入框值变化的情况，如果使用 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)时候触发,有时候并不能 ...
随机推荐
-
liunx 系统 git clone ssh代码时需要sshkey
1. 在root用户目录下 执行命令 cd .ssh cat id_rsa.pub 粘贴 ssh key
-
/usr/lib/libstdc++.so.6: version `GLIBCXX_3.4.15&#39; not found错误的解决
升级cmake时,提示"Error when bootstrapping CMake:Problem while running initial CMake",第二次运行./boo ...
-
Oracle数据库管理之创建和删除数据库
转自:http://supportopensource.iteye.com/blog/678898 一.数据库管理概述 在完成Oracle软件安装后,DBA就应该对组织和管理数据库负责任,其主要任务是 ...
-
安装完CentOS 7 Minimal之后，从头打造桌面工作环境
安装完CentOS 7 Minimal之后,从头打造桌面工作环境 U盘装CentOS 7 DVD版不能引导的解决办法 更改root密码 SSH登录 增加除root之外的常规用户 装完CentOS 7之 ...
-
javaScript 工作必知(五) eval 的使用
eval eval(parse) parse :里面跟参数字符串,我们知道执行javascript 会编译执行, 改变全局变量的值: var x = 2; //定义的全局变量 alert(x); ...
-
⑤bootstrap表格使用基础案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
-
[转载]解决在win10中webstrom无法使用命令行(Terminal)
转载地址:https://qiaolevip.iteye.com/blog/2217688 原因:计算机从win7更新到win10,webstorm9命令框无法输入,以为是webstorm问题和win ...
-
angular学习笔记（3）- MVC
angular1学习笔记(3)- MVC --- MVC终极目标 - 模块化和复用 AngularJs的MVC是借助于$scope实现的!!! 神奇的$scope: 1.$scope是一个POJO(P ...
-
Word Embedding与Word2Vec
http://blog.csdn.net/baimafujinji/article/details/77836142 一.数学上的“嵌入”(Embedding) Embed这个词,英文的释义为, fi ...
-
Android Toast.makeText用法
Toast是Android中用来显示显示信息的一种机制,和Dialog不一样的是,Toast是没有焦点的,而且Toast显示的时间有限,过一定的时间就会自动消失.下面用一个实例来看看如何使用Toast ...