(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. Linux中强制结束一个进程的终极方法

    在 Linux Ubuntu 服务器上用 dnx 基于 Kestrel 成功运行一个 ASP.NET 5 站点后,怎么也无无法退出. 运行的命令如下: /data/git/dnx/artifacts/ ...

  2. 在Eclipse添加Android兼容包( v4、v7 appcompat )

    昨天添加Android兼容包,碰到了很多问题,在这里记录一下,让后面的路好走. 如何选择兼容包, 请参考Android Support Library Features(二) 一.下载Support ...

  3. [ACM_模拟] ACM - Draw Something Cheat [n个长12的大写字母串，找出交集，按字母序输出]

    Description Have you played Draw Something? It's currently one of the hottest social drawing games o ...

  4. Java程序员的日常 —— 工作一天的收获

    看题目可能是扯皮,其实还是有很多专业知识的.从最开始没有注意到设计原则,到后面的jquery实战技巧,都是今天一天碰到的问题. 每天整理一点点,每天收获一点点. 关于软件设计 在设计系统结构的时候,一 ...

  5. [jQuery学习系列四 ]4-Jquery学习四-事件操作

    前言:今天看知乎偶然看到中国有哪些类似于TED的节目, 回答中的一些推荐我给记录下来了, 顺便也在这里贴一下: 一席 云集 听道 推酷 青年中国说 SELF格致论道 参考:http://www.365 ...

  6. atitit. 集合groupby 的实现(2)---自定义linq查询--java .net php

    atitit.  集合groupby 的实现(2)---自定义linq查询--java .net php 实现方式有如下 1. Linq的实现原理流程(ati总结) 1 2. groupby  与 事 ...

  7. 将外卖O2O广告一棍子打成竞价排名，秤把平了吗？

    近日,诸多媒体报道称美团外卖.饿了么等外卖O2O将竞价排名引入外卖平台当中进行广告运营一事闹得沸沸扬扬.那么,美团外卖.饿了么真的都是竞价排名吗? 其实,美团外卖的付费推广仅仅只是针对列表的固定位置, ...

  8. SSL在https和MySQL中的原理思考

    之前对HTTPS通信过程有过了解,HTTPS是应用HTTP协议使用SSL加密的版本,在TCP和HTTP之间增加SSL协议.通过握手阶段认证双方身份,协商对称秘钥对通信信息进行加密.此处只描述常用的服务 ...

  9. jquery时间倒计时

    代码: js: function countDown(time, id) {  //time的格式yyyy/MM/dd hh:mm:ss    var day_elem = $(id).find('. ...

  10. Windows Server 安装 BitLocker

    打开PowerShell(管理员): C:\> Install-WindowsFeature BitLocker -Restart 安装好后,系统会自动重新启动. Windows Server ...