在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. 使用Python从Markdown文档中自动生成标题导航

    概述 知识与思路 代码实现 概述 Markdown 很适合于技术写作,因为技术写作并不需要花哨的排版和内容, 只要内容生动而严谨,文笔朴实而优美. 为了编写对读者更友好的文章,有必要生成文章的标题导航 ...

  2. s3c2440液晶屏驱动 (内核自带) linux-4.1.24

    自带有一部分驱动的配置信息,只要修改这部分就能支援 不同的液晶屏 - /arch/arm/mach-s3c24xx/mach-smdk2440.c 另一部分在 /drivers/video/fbdev ...

  3. windows系统nginx配置root绝对路径的问题

    看了下logs下面的error.log文件,发现路径有问题,修改了conf配置,把root的路径反斜杠要用两个反斜杠进行转义,再次运行正常了.

  4. 怎么用AJAX来判断dedecms用户是否登录呢

    JS代码:Copy code<script language="javascript" src="{dede:global name='cfg_cmspath'/} ...

  5. ASP.NET MVC5----基本用法

    由于之前在项目中也使用MVC进行开发,但是具体是那个版本就不是很清楚了,但是我觉得大体的思想是相同的,只是版本高的在版本低的基础上增加了一些更加方便操作的东西.下面是我学习ASP.NET MVC5高级 ...

  6. EF简单的添加修改删除基本语法

    using ( androidhiveEntities db = new androidhiveEntities() )                {                    #re ...

  7. web api authentication

    最近在学习web api authentication,以Jwt为例, 可以这样理解,token是身份证,用户名和密码是户口本, 身份证是有有效期的(jwt 有过期时间),且携带方便(自己带有所有信息 ...

  8. 据说年薪30万的Android程序员必须知道的帖子

    Android中国开发精英 目前包括: Android开源项目第一篇--个性化控件(View)篇       包括ListView.ActionBar.Menu.ViewPager.Gallery.G ...

  9. Fragment全解析系列(一):那些年踩过的坑

    开始之前 最新版知乎,单Activity多Fragment的架构,响应可以说非常"丝滑",非要说缺点的话,就是没有转场动画,并且转场会有类似闪屏现象.我猜测可能和Fragment转 ...

  10. Reportng报告替代testng

    1,工程导入jar包