监听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),这行代码是 ...
随机推荐
- JavaScript中的*top、*left、*width、*Height具体解释
来源:http://www.ido321.com/911.html html代码 1: <body> 2: <div class="father" id=&quo ...
- sql简单的语句
选择:select * from table1 where 范围 插入:insert into table1(field1,field2) values(value1,value2) 删除:delet ...
- 前端项目中常用es6知识总结 -- let、const及数据类型延伸
项目开发中一些常用的es6知识,主要是为以后分享小程序开发.node+koa项目开发以及vueSSR(vue服务端渲染)做个前置铺垫. 项目开发常用es6介绍 1.块级作用域 let const 2 ...
- (转)修改 ubuntu 默认启动项
转自: http://jingyan.baidu.com/article/afd8f4de58959134e386e969.html 当我们安装windows和ubuntu双系统以后,默认启动变成ub ...
- 【AIM Tech Round 4 (Div. 2) A】Diversity
[链接]http://codeforces.com/contest/844/problem/A [题意] 大水题 [题解] 看看不同的个数num是不是小于k,小于k,看看len-num够不够补的 [错 ...
- 【软件project】机房收费系统之图形回想
[背景]通过一阶段的学习.自己整理了整理机房收费系统.以下想通过几张图来回顾一下机房的总体流程.此图形仅仅代表鄙人现阶段的理解.本文仅供參考,若有不妥的地方,请积极指正. 1.机房收费系统业务流程图 ...
- 【Expression 序列化】WCF的简单使用及其Expression Lambada的序列化问题初步解决方案
地址:http://www.cnblogs.com/guomingfeng/tag/Expression%E5%BA%8F%E5%88%97%E5%8C%96/
- Android学习笔记之ViewFlipper
<1>被添加到ViewFlipper中的两个或两个以上的视图之间将执行一个简单的ViewAnimator动画.一次仅能显示一个子视图.如果需要,可以设置间隔时间使子视图像幻灯片一样自动显示 ...
- sql server备份与还原 sql语句
USE master DECLARE tb CURSOR LOCAL FOR SELECT 'Kill '+ CAST(Spid AS VARCHAR) FROM master.dbo.sysproc ...
- bootstrap课程6 bootstrap的表单注意事项有哪些
bootstrap课程6 bootstrap的表单注意事项有哪些 一.总结 一句话总结: 1.bootstrap中的表单中的每一项是什么样的形式? div.form-group>label +i ...