在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. ios web html 上传图片到服务器后方向不对解决

    结论: 1.ios上传会在exif中带一个 Orientation的属性,这个属性在windows中不会生效,在ios浏览器中会生效,造成图片在windows资源管理器中与ios浏览器中方向不一致 2 ...

  2. 关于wamp5中(apache)设置虚拟主机

    找了很多文章,但是很多对于最新的apache都已经过时无法生效了. http://blog.csdn.net/yuluo727282752/article/details/6944359 这篇文章写得 ...

  3. Custom work flow

    http://runjs.cn/detail/99epj1t2 http://www.cqroad.cn/ https://jsplumbtoolkit.com/demo/flowchart/dom. ...

  4. Bash:-set设置位置变量结合while和shift使用

    #!/bin/bash aaa=( ) bbb=(a b c d) set -- ${aaa[@]} ));do } shift done set -- echo "------------ ...

  5. QDataStream和QByteArray

    一个写操作可以参考: QDataStream &operator >>(QDataStream &in, SerializedMessage &message) { ...

  6. es搜索引擎

    1.es简介 2.es优缺点 3.es使用 4.es可以解决的问题 5.es举例 6.es执行结果截图 7.es数据增量方案 8.使用es搜索 一.es简介 es是一个是一个实时的分布式搜索和分析引擎 ...

  7. 升级python到2.7版本pip不可用

    升级python到2.7版本pip不可用 [root@localhost pip-7.1.2]# pip Traceback (most recent call last): File "/ ...

  8. Windows下nodejs 模块配置 全局模式与本地模式的区别

    第1步:下载.安装文件 (nodejs的官网http://www.nodejs.org/download/ ) 第2步:安装相关模块环境 打开C:\Program Files\nodejs 目录你会发 ...

  9. linux -- nano

    今天在git commit的时候碰到了一种编辑方式 -- 不会用 T.T,然后找了下相关的文档. ^G -- ctrl+g 帮助文档 ^O -- ctrl+o 写出,会出现下面的一行提示,是否保存,直 ...

  10. 屏幕监视专家 v1.0 定时录制屏幕动画发送到指定邮箱

    ScreenWatcher v1.0功能:定时录制屏幕动画发送到指定邮箱,录制的动画为gif,可指定录制多长时间.指定几点直接开始录制,完全后台运行.作者:Bluefish 下载链接: http:// ...