HTML5 input事件检测输入框变化[转载]
原文: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事件检测输入框变化[转载]的更多相关文章
- HTML5 input事件检测输入框变化
之前一直用change事件来监听输入框内容是否发生变化,只有当输入框失去焦点时才会触发,没想到html5还有个input事件,只要输入框内容发生变化就会立即触发,既然有这么好的东西我们干嘛放着不用呢, ...
- HTML5 新增的 input 事件
以往 HTML 的 input 輸入框,無法即時反映使用者的輸入內容.onkeyup.onkeydown 事件,無法即時.精確地取得使用者的輸入資料:而 onchange.onblur 事件,要等到失 ...
- change事件和input事件的区别
input事件: input事件在输入框输入的时候回实时响应并触发 change事件: change事件在input失去焦点才会考虑触发,它的缺点是无法实时响应.与blur事件有着相似的功能,但与bl ...
- 即时搜索或input实时检测监听输入框变化
js实现的文本框内容发生改变立马触发事件简单介绍:本章节介绍一下如何在文本框的内容发生变化的时候,立马触发一个事件执行响应的操作,而不是像是keydow或者keyup事件一样,只能够检测通过键盘输入导 ...
- html5 实时监听输入框值变化的完美方案:oninput & onpropertychange
结合 HTML5 标准事件 oninput 和 IE 专属事件 onpropertychange 事件来监听输入框值变化. H5手机端: <input type="text" ...
- input事件在进行模糊搜索时,用到的即时监测input的值变化的方法(即时搜索的input和propertychange方法)
做搜索功能的时候,经常遇到输入框检查的需求,最常见的是即时搜索,今天好好小结一下. 即时搜索的方案: (1)change事件 触发事件必须满足两个条件: a)当前对象属性改变,并且是由键盘或鼠标 ...
- input输入框的input事件和change事件
input输入框的onchange事件,要在 input 失去焦点的时候才会触发: 在输入框内容变化的时候不会触发change,当鼠标在其他地方点一下才会触发: onchange 事件也可用于单选框与 ...
- input输入中文时,拼音在输入框内会触发input事件的问题。
问题描述: 监听文本输入框的input事件,在拼写汉字(输入法)但汉字并未实际填充到文本框中(选词)时会触发input事件,如图: 需要完成的需求就是在输入阶段不触发input中的事件,选词之后文字落 ...
- jQuery实时监听input的值变化(input的值产生变化才会触发事件)
//用于监听input的值变化(input的值产生变化才会触发事件) (function ($) { $.fn.watch = function (callback) { return this.ea ...
随机推荐
- [Oracle]理解undo表空间
一.回退段介绍 在Oracle数据库中,当某个事物对数据进行修改时,Oracle首先将数据的原始值保存到一个回退段中.一个事物只能将它的回退信息保存到一个回退段中,而多个并行事物可以使用同一个回退段. ...
- Win7 32位系统下Sublime text 3的安装以及配置C/C++、java、python的开发环境方法
本人初学者,此文仅是对这几天鼓捣subime text 3一点微不足道的经验总结,如有明显错误,欢迎指正! 好了,废话少说,进入正题,之前编程java一直用的是eclipse,java的主流IDE,后 ...
- ZOJ3541 The Last Puzzle
这道题是宁波集训的那道题,讲课时轻描淡写吧(应该是我听课不认真罢了),所以这样就要靠自己的理解了, dp[i][j][0]表示从左端点开始完成整个区间的最小花费dp[i][j][1]表示从右端点开始完 ...
- PS 软件操作应用处理——粒子化任务效果
前 言 JRedu 上次分享中,给大家介绍了一些图片的处理方法,主要是通过滤镜里的功能,把图片处理成素描效果或者水彩画效果,营造出不同的氛围. PS是一款非常强大的软件,包含了非常多的功能,合成 ...
- Html事件冒泡
原以为span不同于input,事件冒泡会被父级标签吞噬,写了个测试事件冒泡的Demo,发现并不是想得那样.另外:event.stopPropagation()以及event.stopImmediat ...
- zoj3953 Intervals 最大不重叠区间加强版 zoj排名第一~
Intervals Time Limit: 1 Second Memory Limit:65536 KB Special Judge Chiaki has n intervals ...
- C#对图片进行马赛克处理,可控制模糊程度
using System.Drawing; using System.Drawing.Imaging; using System.Web.Mvc; namespace MVC2017_Sample.C ...
- 【框架学习与探究之消息队列--EasyNetQ(2)】
声明 本文欢迎转载,系博主原创,本文原始链接地址:http://www.cnblogs.com/DjlNet/p/7654902.html 前言 此文章,是承接上篇:[框架学习与探究之消息队列--Ea ...
- 易语言关于使用CURL,网页_访问,网页_访问S,网页_访问_对象,鱼刺(winHttpW)发送Get性能测试
易语言关于使用 CURL,网页_访问,网页_访问S,网页_访问_对象,鱼刺(winHttpW)发送Get性能测试 测试模块情况: |-精易模块5.8 |-鱼刺类Http |-libCURL +++ ...
- Apache配置腾讯云SSL证书指引
一.安装Apache 1) 使用yum安装Apache # yum install httpd 2) 修改测试页面 # vim /var/www/html/index.heml PS:修改为测试内容, ...