oninput,onpropertychange,onchange:
oninput是onpropertychange的非IE浏览器版本,支持firefox和opera等浏览器,但有一点不同,它绑定于对象时,并非该对象所有属性改变都能触发事件,它只在对象value值发生改变时奏效。
onpropertychange的话,只要当前对象属性发生改变,都会触发事件,但是它是IE专属的;
onchange触发事件必须满足两个条件:
a)当前对象属性改变,并且是由键盘或鼠标事件激发的(脚本触发无效)
b)当前对象失去焦点(onblur);
注意:oninput和 onpropertychange这两个事件在 IE9 中都有个小BUG,那就是通过右键菜单菜单中的剪切和删除命令删除内容的时候不会触发
 

oninput 是 html5 的标准事件,对于检测 textarea, input:text, input:password 和 input:search 这几个元素通过用户界面发生的内容变化非常有用,在内容修改后立即被触发,不像 onchange 事件需要失去焦点才触发。oninput 事件在主流浏览器的兼容情况(IE9+,chorem,safari,firefox2+)。

javascript写法:

在监听到 onpropertychange 事件后,可以使用 event 的 propertyName 属性来获取发生变化的属性名称。

<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写法(需要引入jquery库):

<script>
$('textarea').bind('input propertychange', function() {
$('.msg').html($(this).val().length + ' characters');
});
</script>

  

 
 
 

监听输入框变化(oninput,onpropertychange,onchange)的更多相关文章

  1. 即时搜索或input实时检测监听输入框变化

    js实现的文本框内容发生改变立马触发事件简单介绍:本章节介绍一下如何在文本框的内容发生变化的时候,立马触发一个事件执行响应的操作,而不是像是keydow或者keyup事件一样,只能够检测通过键盘输入导 ...

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

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

  3. js/jquery 实时监听输入框值变化的完美方案:oninput & onpropertychange

    (1)     先说jquery, 使用 jQuery 库的话,只需要同时绑定 oninput 和 onpropertychange 两个事件就可以了,示例代码: $('#username').bin ...

  4. js监听输入框值的即时变化onpropertychange、oninput

    js监听输入框值的即时变化onpropertychange.oninput 很多情况下我们都会即时监听输入框值的变化,以便作出即时动作去引导浏览者增强网站的用户体验感. // //   要达到的效果 ...

  5. asp.net,监听输入框值的即时变化onpropertychange、oninput

    作者:自由天堂发布站点:WEB六零零 网页设计制作原文地址:http://www.web600.net/html/editor/JavaScript/201001131529.html 要达到的效果 ...

  6. 实时监听输入框值变化:oninput & onpropertychange

    结合 HTML5 标准事件 oninput 和 IE 专属事件 onpropertychange 事件来监听输入框值变化. oninput 是 HTML5 的标准事件,对于检测 textarea, i ...

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

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

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

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

  9. oninput和onpropertychange实时监听输入框值的变化

    oninput和onpropertychange实时监听输入框值的变化 传统监听输入框的做法就是使用keyup.keydown.keypress,或者change事件来实现,但keyup.keydow ...

随机推荐

  1. 应用程序之Xib自定义Cell

    效果展示 结构分析 代码实现 一.效果展示 二.结构分析 1⃣️首先我们让我们的控制器不再继承UIViewController,而是继承UITableViewController.这样就直接遵守了de ...

  2. 性能测试框架Multi-Mechanize安装与使用

    python模块介绍- multi-mechanize 通用的性能测试工具 简介 Multi-Mechanize 是一个开源的性能和负载测试框架,它并发运行多个 Python 脚本对网站或者服务生成负 ...

  3. 调用android系统相机拍照并保存

    [java] view plaincopyprint? <span style="font-size:18px;">package com.demo; import j ...

  4. 38: 立方根getCubeRoot

    题目描述:计算一个数字的立方根,不使用库函数 •接口说明 原型:public static double getCubeRoot(double input) 输入:double 待求解参数 返回值:d ...

  5. openssl生成https证书

    openssl生成https证书 分类: 其它2009-09-03 16:20 452人阅读 评论(0) 收藏 举报 includemoduleaccessapachessl服务器 openssl生成 ...

  6. Flex版的2048游戏

    近期2048游戏好像挺火.在公交,吃饭,甚至在路上走路都有人拿着手机在玩,之前我看同事玩,认为非常幼稚,移来移去太无聊了吧 到后面自己也下了.发现确实挺无聊的,也就是在无聊的时候打发无聊的时间,后来就 ...

  7. Linux U盘只读解决方法

    Linux Fat的U盘只读,这个问题经常出现,原因大家都说了是U盘的错误,出现这种情况后,一般的解决方案是 mount | grep <U盘的标签> # 找到你的U盘的对应的设备名称,如 ...

  8. error_logger 爆炸

    具有讽刺意味的是,负责错误日志的进程竟然是最为脆弱的之一.在Erlang的缺省安装中,error_logger39负责记录日志(写入磁盘或者发送到网络上),它的速度要比错误产生的速度慢得多.尤其是在记 ...

  9. javascript的defer和async(转载)

    http://ued.ctrip.com/blog/?p=3121 我们常用的javascript标签,有两个和性能.js文件下载执行相关的属性:defer和async defer的含义[摘自http ...

  10. Oracle学习第二篇—单行函数

    1字符函数 length  字符长度 lengthb 字节长度 lower 变为小写 upper 变为大写 initcap 首字母大写 select Lower('xun Ying') 小写,Uppe ...