原文:http://www.linuxidc.com/Linux/2015-07/119984.htm

之前一直用change事件来监听输入框内容是否发生变化,只有当输入框失去焦点时才会触发,没想到html5还有个input事件,只要输入框内容发生变化就会立即触发,既然有这么好的东西我们干嘛放着不用呢,接下来就来给大家介绍一下:

如果我们页面上有这样一个简单到极致的输入框:

<input type="text">

那么我们现在用jquery给它绑定input事件,如下:

$("input:text").bind("input propertychange",function(){

  console.log($(this).val().length);//打印输入框字符长度
 
});

这样一来只要输入框内容发生变化,都会立即打印出里面字符串的长度来了。

需要注意的是input事件是html5的东东,IE9以下版本中是无法支持的,所以需要用propertychange事件来代替。

input事件除了能够监听input:text元素的内容变化,同时还可以监听input:password,input:search以及textarea这几个元素,在html绑定的写法为:

<input type="text" oninput="onInput(event)" onpropertychange="onPropertyChange(event)">

HTML5 input事件检测输入框变化[转载]的更多相关文章

  1. HTML5 input事件检测输入框变化

    之前一直用change事件来监听输入框内容是否发生变化,只有当输入框失去焦点时才会触发,没想到html5还有个input事件,只要输入框内容发生变化就会立即触发,既然有这么好的东西我们干嘛放着不用呢, ...

  2. HTML5 新增的 input 事件

    以往 HTML 的 input 輸入框,無法即時反映使用者的輸入內容.onkeyup.onkeydown 事件,無法即時.精確地取得使用者的輸入資料:而 onchange.onblur 事件,要等到失 ...

  3. change事件和input事件的区别

    input事件: input事件在输入框输入的时候回实时响应并触发 change事件: change事件在input失去焦点才会考虑触发,它的缺点是无法实时响应.与blur事件有着相似的功能,但与bl ...

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

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

  5. html5 实时监听输入框值变化的完美方案:oninput & onpropertychange

    结合 HTML5 标准事件 oninput 和 IE 专属事件 onpropertychange 事件来监听输入框值变化. H5手机端: <input type="text" ...

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

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

  7. input输入框的input事件和change事件

    input输入框的onchange事件,要在 input 失去焦点的时候才会触发: 在输入框内容变化的时候不会触发change,当鼠标在其他地方点一下才会触发: onchange 事件也可用于单选框与 ...

  8. input输入中文时,拼音在输入框内会触发input事件的问题。

    问题描述: 监听文本输入框的input事件,在拼写汉字(输入法)但汉字并未实际填充到文本框中(选词)时会触发input事件,如图: 需要完成的需求就是在输入阶段不触发input中的事件,选词之后文字落 ...

  9. jQuery实时监听input的值变化(input的值产生变化才会触发事件)

    //用于监听input的值变化(input的值产生变化才会触发事件) (function ($) { $.fn.watch = function (callback) { return this.ea ...

随机推荐

  1. java学习——java中的反射学习笔记

    Java--reflect 一.Class类的使用 什么是Class类? 1:在面向对象的世界中,万事万物皆对象. java语言中,静态的成员,普通数据类型类是不是对象呢? 是,对象!是类的对象! 类 ...

  2. Linux入门之常用命令(2)

    (三) 链接文件 ln [-s] [源文件] [目标文件]       -s表示符号链接 没有则是硬链接 硬链接是一个独立文件 (相当于一个副本) 符号链接是一个链接文件(相当于一个快捷方式) 但是修 ...

  3. 洗礼灵魂,修炼python(8)--高效的字典

    python几大核心之--字典(dict) 1.什么是字典 学生时代都用过字典吧?用这个字的读音,偏旁就能用字典查到其相关信息,词性,意思,组词,造句,还有在什么场合下用这个字等等的. 在python ...

  4. hdu1356&hdu1944 博弈论的SG值(王道)

    S-NimProblem DescriptionArthur and his sister Caroll have been playing a game called Nim for some ti ...

  5. JAVAWEB复习资料-01

    CSS中@import和link两种插入样式表方式有什么不同? 1.link属于HTML标签,除了引入css文件之外还能定义RSS等,而@import只能用于加载CSS. 2.link在引用CSS时, ...

  6. 搭建git远程服务器三步骤

    以前都是使用git,这次由于工作需要,需要自己搭建一个远程git服务器.根据网上的 介绍,捣鼓了一下午,终于把远程git服务器搞定了,这里,做个总结. 搭建git远程服务,首先要安装git和ssh,以 ...

  7. EsRejectedExecutionException排错与线程池类型

    1.EsRejectedExecutionException异常示例 java.util.concurrent.ExecutionException: RemoteTransportException ...

  8. nginx的反向代理功能和缓存功能

    html { font-family: sans-serif } body { margin: 0 } article,aside,details,figcaption,figure,footer,h ...

  9. [译]ASP.NET Core 2.0 中间件

    问题 如何创建一个最简单的ASP.NET Core中间件? 答案 使用VS创建一个ASP.NET Core 2.0的空项目,注意Startup.cs中的Configure()方法: public vo ...

  10. JS中apply和call的区别和用法

    Javascript中有一个call和apply方法,其作用基本相同,但是它们也有略微不同的地方. JS手册中对call方法的解释是: call方法:调用一个对象的一个方法,以另一个对象替换当前对象. ...