监听输入框变化(oninput,onpropertychange,onchange)
oninput 是 html5 的标准事件,对于检测 textarea, input:text, input:password 和 input:search 这几个元素通过用户界面发生的内容变化非常有用,在内容修改后立即被触发,不像 onchange 事件需要失去焦点才触发。oninput 事件在主流浏览器的兼容情况(IE9+,chorem,safari,firefox2+)。
javascript写法:
在监听到 onpropertychange 事件后,可以使用 event 的 propertyName 属性来获取发生变化的属性名称。
<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写法(需要引入jquery库):
<script>
$('textarea').bind('input propertychange', function() {
$('.msg').html($(this).val().length + ' characters');
});
</script>
监听输入框变化(oninput,onpropertychange,onchange)的更多相关文章
- 即时搜索或input实时检测监听输入框变化
js实现的文本框内容发生改变立马触发事件简单介绍:本章节介绍一下如何在文本框的内容发生变化的时候,立马触发一个事件执行响应的操作,而不是像是keydow或者keyup事件一样,只能够检测通过键盘输入导 ...
- 【转载】实时监听输入框值变化的完美方案:oninput & onpropertychange
oninput 是 HTML5 的标准事件,对于检测 textarea, input:text, input:password 和 input:search 这几个元素通过用户界面发生的内容变化非常有 ...
- js/jquery 实时监听输入框值变化的完美方案:oninput & onpropertychange
(1) 先说jquery, 使用 jQuery 库的话,只需要同时绑定 oninput 和 onpropertychange 两个事件就可以了,示例代码: $('#username').bin ...
- js监听输入框值的即时变化onpropertychange、oninput
js监听输入框值的即时变化onpropertychange.oninput 很多情况下我们都会即时监听输入框值的变化,以便作出即时动作去引导浏览者增强网站的用户体验感. // // 要达到的效果 ...
- asp.net,监听输入框值的即时变化onpropertychange、oninput
作者:自由天堂发布站点:WEB六零零 网页设计制作原文地址:http://www.web600.net/html/editor/JavaScript/201001131529.html 要达到的效果 ...
- 实时监听输入框值变化:oninput & onpropertychange
结合 HTML5 标准事件 oninput 和 IE 专属事件 onpropertychange 事件来监听输入框值变化. oninput 是 HTML5 的标准事件,对于检测 textarea, i ...
- 实时监听输入框值变化的完美方案: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和onpropertychange实时监听输入框值的变化 传统监听输入框的做法就是使用keyup.keydown.keypress,或者change事件来实现,但keyup.keydow ...
随机推荐
- SAS学习经验总结分享:篇四—SQL过程
SQL过程 SQL过程是实现对数据集或关系数据库的表进行操作的过程,对数据集或关系数据库的表进行查询.修改.创建表.删除数据.插入数据和更新数据等功能.提现了SAS对大型数据库管理系统通用的SQL语言 ...
- Web Service之Soap请求响应内容中文编码解密
java模拟Soap请求测试Web Service接口,发现Web Service响应内容中的中文竟然是编码格式.比如: 中文:退保成功 Soap中文编码:退保成功 我仔细分析后发现,退编码实际上 ...
- sprint3 【每日scrum】 TD助手站立会议第六天
站立会议 组员 昨天 今天 困难 签到 刘铸辉 (组长) 在添加日程类型处添加了选择闹钟间隔多长时间相应,并写了闹钟运行的类 在日历各个事件上都增加闹钟显示,并将数据传递给日程和时间表 感觉跟楠哥在设 ...
- javascript的slice(),splice(),split(),substring(),substr()
例子摘抄于http://www.w3school.com.cn/jsref/jsref_obj_array.asp 1.slice(): Array和String对象都有 在Array中 slice ...
- OpenStack安装CentOS镜像:Device eth0 does not seem to be present, delaying initialization
解决办法:删除 /etc/udev/rules.d/70-persistent-net.rules 后重启机器.70-persistent-net.rules这个文件确定了网卡与MAC地址的绑定,cl ...
- 【Python】IDLE启动错误
启动IDLE时报Subprocess Startup Error错误 错误信息 IDLE's subprocess didn't make connection.Either IDLE cant't ...
- 15 nginx反向代理实现nginx+apache动静分离
一:nginx反向代理实现nginx+apache动静分离-------------概念--------------------------- nginx反向代理服务器+负载均衡 用nginx做反向代 ...
- 用apache做为代理下载本地pdf文件
有一些公司会用apache做为代理,下载服务器上的pdf文件.以下是apache做为代理的配置 一. 环境 centos6.5 192.168.69.3 二. yum安装apache 服务 [zxj ...
- 模块:(日期选择)jquery、bootstrap实现日期下拉选择+bootstrap jquery UI自带动画的日期选择器
一:jquery.bootstrap实现日期下拉选择 点击文本框弹出窗口 弹窗显示日期时间选择下拉 年份取当前年份的前后各5年 天数随年份和月份的变化而变化 点击保存,文本框中显示选中的日期 代码部分 ...
- UITableView的headerView和headerInsectionView
UITableView有两个headerView:tableHeaderView.和headerInsectionView(组头视图). 给tableView添加这两个View:tableHead ...