在web开发中,我们有时会需要动态监听输入框值的变化,当使用onkeydown、onkeypress、onkeyup作为监听事件时,会发现一些复制粘贴等操作用不了,同时,在处理组合快键键的时候也很麻烦。这时候我们需要更专业的解决方案:HTML5标准事件oninput、onchange和IE专属的事件properchange。

1.oninput&onchange:

oninput和onchange都是事件对象,当输入框的值发生改变时触发该事件。不同的是,oninput是在值改变时立即触发,而onchange是在值改变后失去焦点才触发,并且可以用在非输入框中,如:select等。
 

2.propertychange:

功能同oninput,用以替代oninput在IE9以下的不兼容性。
 

3.output:

output是一个HTML5标签,IE系列浏览不兼容,主要用于计算输出。如:

propertychange 和 input 事件:

1)propertychange只要当前对象的属性发生改变就会触发该事件

2)input是标准的浏览器事件,一般应用于input元素,当input的value发生变化就会发生,无论是键盘输入还是鼠标黏贴的改变都能及时监听到变化

$(function(){

$('#username').bind('input propertychange', function() {

$('#result').html($(this).val().length + ' characters');

});

})

这里bind同时绑定了input和propertychange两个方法。

转:http://www.codes51.com/article/detail_3922282.html

即时反应的input和propertychange方法的更多相关文章

  1. input事件在进行模糊搜索时,用到的即时监测input的值变化的方法(即时搜索的input和propertychange方法)

    做搜索功能的时候,经常遇到输入框检查的需求,最常见的是即时搜索,今天好好小结一下. 即时搜索的方案: (1)change事件    触发事件必须满足两个条件: a)当前对象属性改变,并且是由键盘或鼠标 ...

  2. 微信小程序自动去除input空格的方法

    当用户输入账号或者密码的时候,可能会有输入空格的情况,但是实际需要是不能够有空格的,所以我们要做一个去除空格,并且适应所有input的name参数的方法,下面请看源码: wxml: <input ...

  3. input 输入框 propertychange

    做搜索功能的时候,经常遇到输入框检查的需求,最常见的是即时搜索,今天好好小结一下. 即时搜索的方案: (1)change事件    触发事件必须满足两个条件: a)当前对象属性改变,并且是由键盘或鼠标 ...

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

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

  5. input实时监听(input oninput propertychange onpropertychange)

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

  6. propertychange方法

    1.html文件 <td> <input id="clientPhone" type="text" name="clientPhon ...

  7. Jquery 获取表单值如input,select等方法

    1 if($("input[name=item][value='val']").attr('checked')==true) //判断是否已经打勾 name即控件name属性,va ...

  8. file_get_contents("php://input")的使用方法

    $data = file_get_contents("php://input"); //input 是个可以访问请求的原始数据的只读流. POST 请求的情况下,最好使用 php: ...

  9. 【转】file_get_contents("php://input")的使用方法

    $data = file_get_contents("php://input");    php://input 是个可以访问请求的原始数据的只读流. POST 请求的情况下,最好 ...

随机推荐

  1. Firebug 学习使用教程

    Firebug是Firefox下的一个扩展,能够调试所有网站语言,如Html.Css等,但FireBug最吸引人的就是JavaScript调试功能,除此之外,还有对Dom的查看与调试,网站整体分析等其 ...

  2. lua 基础 1

    --1.1 Chunks--[[Chunk 是一系列语句,Lua 执行的每一块语句,比如一个文件或者交互模式下的每一行都是一个 Chunk.]] -- 1.2 全局变量--[[ 全局变量不需要声明,给 ...

  3. Weblogic日志机制详解

    服务器日志  每个 WebLogic Server 实例将来自子系统和应用程序的所有消息写入位于本地主机上的服务器日志文件.默认情况下,服务器日志文件位于服务器实例根目录下的 logs 目录中:例如, ...

  4. iOS 消息转发机制

    这篇博客的前置知识点是 OC 的消息传递机制,如果你对此还不了解,请先学习之,再来看这篇.这篇博客我尝试用口语的方式像讲述 PPT 一样给大家讲述这个知识点. 我们来思考一个问题,如果对象在收到无法解 ...

  5. 一个被称为世界上最短的判断IE方法

    最近偶然看到一段判断是否为IE浏览器的代码: if(!+[1,]) { console.info("IE 浏览器"); } else { console.info("非 ...

  6. border-radius的兼容问题

    border-radius可以便捷的制作圆角效果,不需要通过增加圆角图片来达到效果,便于维护. 语法:border-radius:none | 1-4 length | % / 1-4 length| ...

  7. JS的兼容函数

    获取类名的兼容函数 //obj.getElementsByClassName 只能在现代浏览器中使用,不能在IE8以下使用 //两个参数 classname 类名 obj 范围 function ge ...

  8. SQL Server2014,附加数据库失败,错误为:5120的解决方法

    在SQL Server 2014附加数据库的时候,报错为: 无法打开物理文件XXX,操作系统错误5(拒绝访问),SQL Server 错误5120 解决方法:  我的电脑→管理→服务和应用程序→ 服务 ...

  9. Metro-Ural119递推

    Time limit: 0.5 second Memory limit: 64 MB Many of SKB Kontur programmers like to get to work by Met ...

  10. (转)jQuery源码解读 -- jQuery v1.10.2

    原文GitHub链接: https://github.com/chokcoco/jQuery-