在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. Java数据结构之表的增删对比---ArrayList与LinkedList之一

    一.Java_Collections表的实现 与c不同Java已经实现并封装了现成的表数据结构,顺序表以及链表. 1.ArrayList是基于数组的实现,因此具有的特点是:1.有索引值方便查找,对于g ...

  2. Arnold AtArray API Test

    #include <ai.h> #include <iostream> #include <stdio.h> #include <vector> #in ...

  3. style设置/获取样式的问题 和 offsetWidth/offsetHeight的问题

    style设置/获取样式的问题:1.js通过style方法    --加样式:加的是行间样式 oDiv.style.width="20"+'px';    --取样式:取得是行间样 ...

  4. VS2012一打开就停止工作的解决方法

    昨天刚装好VS2012,用得好好的,嘿,今早儿 一打开程序,就告诉我 VS2012停止工作,只有关闭程序或者调试程序. 小主酸菜郁闷不已,必须找到解决方法啊,错误提示如图: 错误原因:        ...

  5. 【转】Description Resource Path Location Type Java compiler level&n

    转载地址:http://blog.sina.com.cn/s/blog_ae96abfd0101qbq0.html 在项目上右键Properties->Project Facets,在打开的Pr ...

  6. 【转】Android选项卡置底的方法

    转载地址:http://www.oschina.net/code/snippet_163910_6092 发现很多Android应用的选项卡 都是显示在页面底部的,网上有资料:通过反射获取TabWid ...

  7. unity3d 第三人称视角的人物移动以及相机控制

    何谓第三人称?就像这样: 用wasd控制人物移动,同时保持在相机的中心.用鼠标右键与滚轮控制相机的角度和距离. 先说一下人物的移动: 首先给作为主角的单位加上 Charactor Controller ...

  8. Unity中各类物理投射性能横向比较

    最近在优化摄像机部分代码,抽了个时间对物理投射这块进行了系统性的测试,发现了不少东西 测试工程下载地址: http://files.cnblogs.com/files/hont/RaycastTest ...

  9. Network网络

    ifconfig 查看服务器网卡名称 ethtool ethXXX 查看网卡具体信息 要测试一个网卡是否真是1000M的,最保险的说用wget测试一个对方的带宽足够大的下载地址 wget http:/ ...

  10. Javascript > Eclipse > Code completion (Content Assist)

    分享一下,整体理清的思路,关于Eclipse中代码的 自动完成,可配置自定义Library文件地址 其实这个思路的通用的,不管任何Eclipse支持的编辑语言,都可以适用.下面已Javascript来 ...