(1)     先说jquery, 使用 jQuery 库的话，只需要同时绑定
oninput 和 onpropertychange 两个事件就可以了，示例代码：

$('#username').bind('input
propertychange', function() {
    $('#content').html($(this).val().length
+ ' characters');
});



(2)　
对于JS原生写法而言， oninput 是 HTML5 的标准事件，对于检测 textarea, input:text, input:password
和 input:search 这几个元素通过用户界面发生的内容变化非常有用，在内容修改后立即被触发，不像 onchange 事件需要失去焦点才触发。oninput 事件在主流浏览器的兼容情况如下：

　　

　　从上面表格可以看出，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>

http://blog.163.com/lgh_2002/blog/static/44017526201341511112874/

js/jquery 实时监听输入框值变化的完美方案：oninput & onpropertychange的更多相关文章

  1. jquery 实时监听输入框值变化的完美方案

    只需要同时绑定 oninput 和 onpropertychange 两个事件,但是这并不完美 $('.input-form :input').bind('input propertychange', ...

  2. 实时监听输入框值变化的完美方案：oninput & onpropertychange

    实时监听输入框值变化的完美方案:oninput & onpropertychange: 网址:http://www.cnblogs.com/lhb25/archive/2012/11/30/o ...

  3. HTML5 oninput实时监听输入框值变化的完美方案

    在网页开发中经常会碰到需要动态监听输入框值变化的情况,如果使用 onkeydown.onkeypress.onkeyup 这个几个键盘事件来监测的话,监听不了右键的复制.剪贴和粘贴这些操作,处理组合快 ...

  4. html5 实时监听输入框值变化的完美方案：oninput & onpropertychange

    结合 HTML5 标准事件 oninput 和 IE 专属事件 onpropertychange 事件来监听输入框值变化. H5手机端: <input type="text" ...

  5. Js/jQuery实时监听输入框值变化

    前言 在做web开发时候很多时候都需要即时监听输入框值的变化,以便作出即时动作去引导浏览者增强网站的用户体验感.而采用onchange时间又往往是在输入框失去焦点(onblur)时候触发,有时候并不能 ...

  6. 【转载】实时监听输入框值变化的完美方案：oninput & onpropertychange

    oninput 是 HTML5 的标准事件,对于检测 textarea, input:text, input:password 和 input:search 这几个元素通过用户界面发生的内容变化非常有 ...

  7. js与jquery实时监听输入框值变化方法

    本文实例讲述了js与jquery实时监听输入框值的oninput与onpropertychange方法.分享给大家供大家参考.具体如下: 最近做过一个项目,需求是下拉框里自动匹配关键字,具体细节是实时 ...

  8. jquery实时监听输入框值变化

    在做web开发时候很多时候都需要即时监听输入框值的变化,以便作出即时动作去引导浏览者增强网站的用户体验感.而采用onchange时间又往往是在输入框失去焦点(onblur)时候触发,有时候并不能满足条 ...

  9. jquery 实时监听输入框值变化方法

    $('.offers-number').bind('input propertychange', function (a, b) { var value = $(this).val() if (!va ...

随机推荐

  1. 从C#到Objective-C

    Objective-C 程序设计语言采用特定的语法,来定义类和方法.调用对象的方法.动态地扩展类,以及创建编程接口,来解决具体问题.Objective-C 作为 C 程序设计语言的超集,支持与 C 相 ...

  2. 跟我一起学WCF(3)——利用Web Services开发分布式应用

    一.引言 在前面文章中分别介绍了MSMQ和.NET Remoting技术,今天继续分享.NET 平台下另一种分布式技术——Web Services 二.Web Services 详细介绍 2.1 We ...

  3. 在ASP.NET 5中显示错误信息

    在 ASP.NET 5 中如果不进行显示错误信息的相关配置,在发生错误时,在浏览器中只能看到空白页面. 显示错误信息的配置方法如下: 1)在 project.json 中添加对 Microsoft.A ...

  4. C++11 并发指南六(atomic 类型详解四 C 风格原子操作介绍)

    前面三篇文章<C++11 并发指南六(atomic 类型详解一 atomic_flag 介绍)>.<C++11 并发指南六( <atomic> 类型详解二 std::at ...

  5. [matlab] 矩阵操作

    >_<:矩阵构造 1．简单矩阵构造 最简单的方法是采用矩阵构造符“[]”.构造1´n矩阵(行向量)时,可以将各元素依次放入矩阵构造符[]内,并且以空格或者逗号分隔:构造m´n矩阵时,每行如 ...

  6. ASP.NET中GridView控件删除数据的两种方法

      今天在用GridView控件时,发现了一个问题,就是使用GridView控件在删除数据时的问题.接下来我们通过模板列方式和CommandField方式删除某条数据讲解下两者之间的区别. 方式一:通 ...

  7. CLIQUE 聚类算法以及Java实现+多线程

    CLIQUE(Clustering In QUEst)是一种简单的基于网格的聚类方法,用于发现子空间中基于密度的簇.CLIQUE把每个维划分成不重叠的区间,从而把数据对象的整个嵌入空间划分成单元.它使 ...

  8. JQuery高性能优化

    使用JQuery时,你可以使用多种选择器,选择同一个元素,各种方法之间的性能是不一样的,有时候差异会特别大. 通常比较常用的选择器有以下几个: ID选择器 $("#id") 标签选 ...

  9. JavaScript中for..in循环陷阱介绍

    for...in循环中的循环计数器是字符串,而不是数字它包含当前属性的名称或当前数组元素的索引,下面有个不错的示例大家可以参考下   大家都知道在JavaScript中提供了两种方式迭代对象: (1) ...

  10. python+redis测试环境搭建

    针对windows操作系统. redis安装: 微软操作系统下,需下载github下面的开源项目,redis网站地址可以找到,直接解压即可. cmd到指定目录,输入下方命令,启动redis服务. re ...