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等的改变事件的更多相关文章

  1. 使用WTL的消息反射封装CEdit实现监听控件文本改变事件

    消息反射机制可以使对消息的处理都集中在控件类中,以CEdit的EN_CHANGE消息为例: /*MyEdit.h*/ class CMyEdit:public CWindowImpl<CMyEd ...

  2. highcharts图表组件入门教程:如何监听柱状图柱子点击事件动态更新当前数据点数值和所对应X轴刻度

    highcharts图表组件入门教程:如何监听柱状图柱子点击事件动态更新当前数据点数值和所对应X轴刻度 作者:highcharts | 时间:2014-6-11 14:07:05 | [小  大] | ...

  3. 时时监听input内容的改变

    心得:我们都知道input有一个change事件,但是是在input元素失去焦点的时候发生,不能时时的监听input内容的改变. 刚开始的时候我是想用setInterval设置计时器的原理定时监听in ...

  4. js中对arry数组的各种操作小结 瀑布流AJAX无刷新加载数据列表--当页面滚动到Id时再继续加载数据 web前端url传递值 js加密解密 HTML中让表单input等文本框为只读不可编辑的方法 js监听用户的键盘敲击事件,兼容各大主流浏览器 HTML特殊字符

    js中对arry数组的各种操作小结   最近工作比较轻松,于是就花时间从头到尾的对js进行了详细的学习和复习,在看书的过程中,发现自己平时在做项目的过程中有很多地方想得不过全面,写的不够合理,所以说啊 ...

  5. vue学习-day05 -- 案例:名字合并(监听data数据的改变)

    1.案例:名字合并(监听data数据的改变) 使用keyup事件监听data数据的改变 <!DOCTYPE html> <html> <head> <titl ...

  6. js 监听整个页面的回车事件

    JS监听整个页面的回车事件 <script type="text/javascript"> document.onkeydown=keyDownSearch;      ...

  7. js监听用户的键盘敲击事件,兼容各大主流浏览器

    js监听用户的键盘敲击事件,兼容各大主流浏览器 <script type="text/javascript"> document.onkeydown = functio ...

  8. 背水一战 Windows 10 (66) - 控件(WebView): 监听和处理 WebView 的事件

    [源码下载] 背水一战 Windows 10 (66) - 控件(WebView): 监听和处理 WebView 的事件 作者:webabcd 介绍背水一战 Windows 10 之 控件(WebVi ...

  9. Android 监听ContentProvider的数据改变

    今天介绍一下怎么监听ContentProvider的数据改变,主要的方法是:getContext().getContentResolver().notifyChange(uri,null),这行代码是 ...

随机推荐

  1. 2.2 Consumer API官网剖析(博主推荐)

    不多说,直接上干货! 一切来源于官网 http://kafka.apache.org/documentation/ 2.2 Consumer API 2.2.消费者API 随着0..0版本,我们已经增 ...

  2. Atcoder AtCoder Regular Contest 079 E - Decrease (Judge ver.)

    E - Decrease (Judge ver.) Time limit : 2sec / Memory limit : 256MB Score : 600 points Problem Statem ...

  3. 关于img标签的探讨

    关于img标签的探讨:一直以来img属于那一种标签受到困惑,因为它既有块元素的特性也有行内元素的属性.它独占一行,也可以设置宽高. 在此重新学习一下标签元素的分类;html元素的分类:块元素.内联元素 ...

  4. 异步调用WCF的方法需要小心的地方

    直接使用下面的代码,由于client对象占用的资源没有被释放,会导致内存泄露GetSimServiceReference.GetSimServiceClient client = new GetSim ...

  5. hibernate中的事务管理是怎么概念?

    1.JDBC事务 JDBC 事务是用 Connection 对象控制的.JDBC Connection 接口( java.sql.Connection )提供了两种事务模式:自动提交和手工提交. ja ...

  6. 洛谷 P1100 高低位交换

    P1100 高低位交换 题目描述 给出一个小于2^32的正整数.这个数可以用一个32位的二进制数表示(不足32位用0补足).我们称这个二进制数的前16位为“高位”,后16位为“低位”.将它的高低位交换 ...

  7. 如何把excel同一个单元格内的文字和数字分别提取出来?

    平台:excel 2010 目的:把excel同一个单元格内的文字和数字分别提取出来 操作: 假设数据在A1单元格:如果文字在前,B1=left(A1,lenb(A1)-len(A1))可得文字,C1 ...

  8. JSP学习 —— 开篇:JSP,servlet容器,Tomcat,servlet容器之间的关系

    JSP(JAVA SERVER PAGE)的缩写,其本身就是servlet的简化,是一种动态网页标准,其特点是在HTML代码中嵌入JAVA代码,JSP标签或用户标签来生成网页.至于它为什么会出现,主要 ...

  9. COGS——C2274. [HEOI 2016] tree

    http://www.cogs.pro/cogs/problem/problem.php?pid=2274 ★☆   输入文件:heoi2016_tree.in   输出文件:heoi2016_tre ...

  10. 12.SpringBoot+MyBatis(XML)+Druid

    转自:https://www.cnblogs.com/MaxElephant/p/8108342.html 主要是在Spring Boot中集成MyBatis,可以选用基于注解的方式,也可以选择xml ...