之前一直用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事件检测输入框变化[转载]

    原文:http://www.linuxidc.com/Linux/2015-07/119984.htm 之前一直用change事件来监听输入框内容是否发生变化,只有当输入框失去焦点时才会触发,没想到h ...

  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. nginx+winsw windows服务

    1.下载Nginx:http://nginx.org/en/download.html 2.下载winsw配置包:http://files.cnblogs.com/files/objecttozero ...

  2. 以代码爱好者角度来看AMD与CMD

    随着浏览器功能越来越完善,前端已经不仅仅是切图做网站,前端在某些方面已经媲美桌面应用.越来越庞大的前端项目,越来越复杂的代码,前端开发者们对于模块化的需求空前强烈.后来node出现了,跟随node出现 ...

  3. 浅谈Excel开发:七 Excel 自定义任务窗体

    前面花了三篇文章讲解了Excel中的UDF函数,RTD函数和异步UDF函数,这些都是Excel开发中的重中之重.本文现在开始接着第二篇文章的菜单系统开始讲解Excel中可供开发的界面元素,本文要讲解的 ...

  4. 换个角度理解云计算之MapReduce

    上一篇简单讲了一下HDFS,简单来说就是一个叫做“NameNode”的大哥,带着一群叫做“DataNode”的小弟,完成了一坨坨数据的存储,其中大哥负责保存数据的目录,小弟们负责数据的真正存储,而大哥 ...

  5. 实战使用Axure设计App,使用WebStorm开发(4) – 实现页面UI

    系列文章 实战使用Axure设计App,使用WebStorm开发(1) – 用Axure描述需求  实战使用Axure设计App,使用WebStorm开发(2) – 创建 Ionic 项目   实战使 ...

  6. WAMPServer 默认安装启动后,图标显示橙黄色

    说明:我是在家的电脑上面学习的WAMPServer的,而家的电脑很干净.这次来学校以后,实验室的电脑被我经常的折磨,今天在安装以后,启动后,发现图标有红色到黄色,就停止了.其实,问题的根源很简单,某个 ...

  7. java数学函数库 API(转)

    原文地址:http://www.24xuexi.com/w/2011-11-08/98206.html 首先给大家看看Math类所提供的主要方法,下面的列表给出了Math类的主要方法,如果要理解Mat ...

  8. ios 向工程里添加Fonts

    ios 向工程里添加Fonts 1.网上搜索字体文件(后缀名为.ttf,或.odf),假如你加入的字体为微软雅黑 2.把字体库导入到工程的resouce中 3.然后在你的工程的Info.plist文件 ...

  9. Nodejs·构建web应用

    本篇的内容比较多..... 1 首先是从基本的Nodejs服务方面讲述前后端统一语言在web应用中的作用: 2 然后讲了web中基本的知识,从请求方法到路由.从查询字符串到Cookie和Session ...

  10. flow.ci Beta 上线,将开发工作流自动化

    说起未来,我们会想到自动.智能.机器人...,希望可以从眼前重复繁琐的事情中解放出来,让"机器人"自动智能地帮我们做更多的事情:希望开发可以更自动化.智能化.社会化,更少的资源浪费 ...