在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. 【ASP.NET 问题】IIS发布网站后出现 "处理程序“PageHandlerFactory-Integrated”在其模块列表中有一个错误"的解决办法

    新装IIS,然后发布网站,运行出现如下错误提示 处理程序“PageHandlerFactory-Integrated”在其模块列表中有一个错误模块“ManagedPipelineHandler” 于是 ...

  2. Java图形化用户界面(GUI)笔记(一)介绍

    一.布局 1.组件 以图形化的方式显示在屏幕上的,和用户进行交互的对象,就叫做组件. 组件包括:菜单.标签.文本框(密码框).滚动条.单选.复选.按钮等等. 2.容器 组件不能独立的显示出来,只能将组 ...

  3. 编写高质量ios-之一 OC 语言的起源

    要点 Objective-c为C语言添加了面向对象的特性,是其超级.Objective-c使用动态绑定的消息结构,也就是说,在运行时才会检查对象类型.接受一条消息之后,究竟应执行何种代码,由运行期环境 ...

  4. selenium查找ifame其中的元素

    废话不多说,直接上代码 from selenium import webdriver browser = webdriver.xx() browser.get(url) browser.swith_t ...

  5. 结构体struts的长度

    在需要计算结构体大小的时候,涉及到的一个问题就是其对齐模数 计算机系统对基本类型数据在内存中存放的位置有限制,它们会要求这些数据的首地址的值是某个数k(通常它为4或8)的倍数,这就是所谓的内存对齐,而 ...

  6. css样式基础三

    css的定位: 其中css中被分为块级元素与行内元素.如块级元素div.hx标签.p元素.行内元素span和strong W3school给出的一切皆为框的定义. 而且可以使用display属性,强行 ...

  7. nodejs路由的部分通配

    1. 占位标识符/:id app.get('/post_api_post_data_ren/bet/follow/:gameEn',function(req,res){ console.log(req ...

  8. R语言基本操作函数---变量的基本操作

    1.变量变换        as.array(x),as.data.frame(x),as.numeric(x),as.logical(x),as.complex(x),as.character(x) ...

  9. 7.dotnet core 如何发邮件

    需要用到的Nuget包 "MailKit": "1.8.1", 方法 /// <summary> /// 发送邮件(支持Html发送,支持添加一个附 ...

  10. 一文说尽C++赋值运算符重载函数(operator=)

    写在前面: 关于C++的赋值运算符重载函数(operator=),网络以及各种教材上都有很多介绍,但可惜的是,内容大多雷同且不全面.面对这一局面,在下在整合各种资源及融入个人理解的基础上,整理出一篇较 ...