监听text等的改变事件
oninput事件是html5的标准事件,支持ie9和以上以及其他的火狐啊谷歌啊等浏览器
ie9以下的可以用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 这两个事件在 IE9 中都有个小BUG，那就是通过右键菜单菜单中的剪切和删除命令删除内容的时候不会触发，而 IE 其他版本都是正常的，目前还没有很好的解决方案。不过 oninput & onpropertychange 仍然是监听输入框值变化的最佳方案，如果大家有更好的方法，欢迎参与讨论。
监听text等的改变事件的更多相关文章
- 使用WTL的消息反射封装CEdit实现监听控件文本改变事件
消息反射机制可以使对消息的处理都集中在控件类中,以CEdit的EN_CHANGE消息为例: /*MyEdit.h*/ class CMyEdit:public CWindowImpl<CMyEd ...
- highcharts图表组件入门教程：如何监听柱状图柱子点击事件动态更新当前数据点数值和所对应X轴刻度
highcharts图表组件入门教程:如何监听柱状图柱子点击事件动态更新当前数据点数值和所对应X轴刻度 作者:highcharts | 时间:2014-6-11 14:07:05 | [小 大] | ...
- 时时监听input内容的改变
心得:我们都知道input有一个change事件,但是是在input元素失去焦点的时候发生,不能时时的监听input内容的改变. 刚开始的时候我是想用setInterval设置计时器的原理定时监听in ...
- js中对arry数组的各种操作小结 瀑布流AJAX无刷新加载数据列表--当页面滚动到Id时再继续加载数据 web前端url传递值 js加密解密 HTML中让表单input等文本框为只读不可编辑的方法 js监听用户的键盘敲击事件，兼容各大主流浏览器 HTML特殊字符
js中对arry数组的各种操作小结 最近工作比较轻松,于是就花时间从头到尾的对js进行了详细的学习和复习,在看书的过程中,发现自己平时在做项目的过程中有很多地方想得不过全面,写的不够合理,所以说啊 ...
- vue学习-day05 -- 案例：名字合并(监听data数据的改变)
1.案例:名字合并(监听data数据的改变) 使用keyup事件监听data数据的改变 <!DOCTYPE html> <html> <head> <titl ...
- js 监听整个页面的回车事件
JS监听整个页面的回车事件 <script type="text/javascript"> document.onkeydown=keyDownSearch; ...
- js监听用户的键盘敲击事件，兼容各大主流浏览器
js监听用户的键盘敲击事件,兼容各大主流浏览器 <script type="text/javascript"> document.onkeydown = functio ...
- 背水一战 Windows 10 (66) - 控件（WebView）: 监听和处理 WebView 的事件
[源码下载] 背水一战 Windows 10 (66) - 控件(WebView): 监听和处理 WebView 的事件 作者:webabcd 介绍背水一战 Windows 10 之 控件(WebVi ...
- Android 监听ContentProvider的数据改变
今天介绍一下怎么监听ContentProvider的数据改变,主要的方法是:getContext().getContentResolver().notifyChange(uri,null),这行代码是 ...
随机推荐
- 1.23 Python知识进阶 - 面向对象编程
一.编程方法 1.函数式编程:"函数式编程"是一种"编程范式"(programming paradigm),也就是如何编写程序的方法论.它属于"结构化 ...
- Codeforces 718C. Sasha and Array（线段树）
传送门 解题思路: 这道题给了我们一个崭新的角度来看线段树. 我们常常使用的线段树是维护区间的函数的. 这里呢,提示我们线段树其实还可以维护递推. 美好的矩阵递推性质支持了这一功能. 或者说,对于递推 ...
- Robot Framework初步使用
第一步,新建一个Project:
- 高中生活-第9篇-开学之初的“失足”囧事，"刻舟求剑"导致腿折了
时间过得好快啊,上次发表"高中生活-第8篇:夏天的空调,冬天的味道"是2014年9月30日,一转眼,就是一年啊. 我自己以为,很多人可能都以为,我又半途而废了,实则不是哦~ 行百里 ...
- method initializationerror not found:JUnit4单元測试报错问题
今天使用JUnit 4进行单元測试时,測试程序一直执行不起来,报method initializationerror not found错误.例如以下: 网上说版本 ...
- [NPM] Publish npm packages using npm publish
In this lesson we will publish our package. We will first add a prepublish script that runs our buil ...
- magento getCarriers 分析
完整的设置订单追踪信息的时候我们可能会用到它.在后台中他在这里设置: 有的时候我们想要设置自己定义的 carrier 比如 顺丰 申通 圆通 ..等等 我们能够先从 magento api 入手分析 ...
- Android学习笔记进阶八之Matrix矩阵
Matrix,中文里叫矩阵,高等数学里有介绍,在图像处理方面,主要是用于平面的缩放.平移.旋转等操作. 在Android里面,Matrix由9个float值构成,是一个3*3的矩阵.最好记住.如下图: ...
- 洛谷—— P1069 细胞分裂
https://www.luogu.org/problem/show?pid=1069#sub 题目描述 Hanks 博士是 BT (Bio-Tech,生物技术) 领域的知名专家.现在,他正在为一个细 ...
- Cocos2d-x学习笔记（一）HelloWorld
原创文章,转载请注明出处:http://blog.csdn.net/sfh366958228/article/details/38656755 前言 正式来公司实习已有一月,前一月主要是看了<C ...