(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. elixir 高可用系列（五） Supervisor

    概述 OTP 平台的容错性高,是因为它提供了机制来监控所有 processes 的状态,如果有进程出现异常, 不仅可以及时检测到错误,还可以对 processes 进行重启等操作. 有了 superv ...

  2. 轻易实现基于linux或win运行的聊天服务端程序

    对于不了解网络编程的开发人员来说,编写一个良好的服务端通讯程序是一件比较麻烦的事情.然而通过EC这个免费组件你可以非常简单地构建一个基于linux或win部署运行的网络服务程序.这种便利性完全得益于m ...

  3. Dynamic CRM 2013学习笔记（四十五）修改实体及字段的前缀（不用new_开头）

    最近做一个升级的CRM项目,为了区分哪些是新增的,所以决定用一个新的前缀来定义实体及新加的字段.之前用的是new_开头,现在改成tm_开头.   原来只要是新建实体或字段都是new_开头:   1. ...

  4. NABCD竞争性需求分析

     1.  Need 需求 市面上关于各类记事本,时钟显示程序,图片显示程序,日历程序有很多,但是它们大多是零散的软件,不利于现在高集成的时代,我们所做的就是将各种功能合起来. 2. Approach ...

  5. Nim教程【一】

    这应该是国内第一个关于Nim入门的系列教程 什么是Nim 我们先来引述网友 Luikore的一段话: Nim 不是函数式的, 但 Nim 支持卫生宏, 可以做 AST 重写, 可以自定编译规则, 是静 ...

  6. unity3d——自带寻路Navmesh （三）（转）

    继续介绍NavMesh寻路的功能,接下来阿赵打算讲一下以下两个例子,先看看完成的效果:   第一个例子对于喜欢DOTA的朋友应该很熟悉了,就是不同小队分不同路线进攻的寻路,红绿蓝三个队伍分别根据三条路 ...

  7. [matlab] MATLAB 界面编程 傻瓜教程

    >_<:在 MATLAB 的命令窗口(Command Window)中运行 guide 命令,来打开 GUIDE 界面,如下: >_<:然后,选择空模板(Blang GUI), ...

  8. jenkins2 hello pipeline

    文章来自:http://www.ciandcd.com 文中的代码来自可以从github下载: https://github.com/ciandcd   根据前面的2篇文章,我们已经安装和配置好了je ...

  9. Gradle里配置jetty实现静态资源的热部署

    通过Gradle我们可以很方便的使用内置jetty启动我们的web程序,在本地进行调试.但是在使用的过程中,我发现了几个问题,导致本地调试的效率大受影响. 如果使用gradle jettyRun启动j ...

  10. webView文本长按显示英文

    webView文本长按显示英文时,在info.plist文件中添加如下内容: <key>CFBundleLocalizations</key> <array> &l ...