javascript --- 实时监听输入框值的变化
实时监听文本框值变化是非常常见的功能,通常最简单的办法就是用keyup,keydown来实现,但是这种方法有两个问题,一个是当直接复制粘贴的时候没法监听到事件,另外一个问题是在移动端,使用删除键删除输入时候也无法监听到!
解决办法:
1、使用onchange事件
onchange事件是文本框内容改变并失去焦点的时候才触发。
2、比较完美的解决办法:oninput和onproper
oninput 是 HTML5 的标准事件,对于检测 textarea, input:text, input:password 和 input:search 这几个元素通过用户界面发生的内容变化非常有用,在内容修改后立即被触发,不像 onchange 事件需要失去焦点才触发。oninput 事件在主流浏览器的兼容情况如下:
从上面表格可以看出,oninput 事件在 IE9 以下版本不支持,需要使用 IE 特有的 onpropertychange 事件替代,这个事件在用户界面改变或者使用脚本直接修改内容两种情况下都会触发,有以下几种情况:
- 修改了 input:checkbox 或者 input:radio 元素的选择中状态, checked 属性发生变化。
- 修改了 input:text 或者 textarea 元素的值,value 属性发生变化。
- 修改了 select 元素的选中项,selectedIndex 属性发生变化。
在监听到 onpropertychange 事件后,可以使用 event 的 propertyName 属性来获取发生变化的属性名称。
集合 oninput & onpropertychange 监听输入框内容变化的示例代码如下:
// Firefox, Google Chrome, Opera, Safari, Internet Explorer from version 9function OnInput (event) {
alert ("The new content: " + event.target.value); }
// Internet Explorerfunction OnPropChanged (event) {
if (event.propertyName.toLowerCase () == "value") { alert ("The new content: " + event.srcElement.value); } }
页面结构如下:
<input type="text" oninput="OnInput (event)" onpropertychange="OnPropChanged (event)" value="Text field" />
然后调用函数:
$('textarea').bind('input propertychange', function() { $('.msg').html($(this).val().length + ' characters'); });
javascript --- 实时监听输入框值的变化的更多相关文章
- oninput和onpropertychange实时监听输入框值的变化
oninput和onpropertychange实时监听输入框值的变化 传统监听输入框的做法就是使用keyup.keydown.keypress,或者change事件来实现,但keyup.keydow ...
- 实时监听输入框值变化的完美方案:oninput & onpropertychange
实时监听输入框值变化的完美方案:oninput & onpropertychange: 网址:http://www.cnblogs.com/lhb25/archive/2012/11/30/o ...
- js与jquery实时监听输入框值变化方法
本文实例讲述了js与jquery实时监听输入框值的oninput与onpropertychange方法.分享给大家供大家参考.具体如下: 最近做过一个项目,需求是下拉框里自动匹配关键字,具体细节是实时 ...
- jquery实时监听输入框值变化
在做web开发时候很多时候都需要即时监听输入框值的变化,以便作出即时动作去引导浏览者增强网站的用户体验感.而采用onchange时间又往往是在输入框失去焦点(onblur)时候触发,有时候并不能满足条 ...
- Js/jQuery实时监听输入框值变化
前言 在做web开发时候很多时候都需要即时监听输入框值的变化,以便作出即时动作去引导浏览者增强网站的用户体验感.而采用onchange时间又往往是在输入框失去焦点(onblur)时候触发,有时候并不能 ...
- js与jquery实时监听输入框值的oninput与onpropertychange方法
文实例讲述了js与jquery实时监听输入框值的oninput与onpropertychange方法.分享给大家供大家参考.具体如下: 最近做过一个项目,需求是下拉框里自动匹配关键字,具体细节是实时监 ...
- 移动端用js与jquery实时监听输入框值的改动
背景: 在一次移动端H5开发中,需要监听输入框值的实时变动. onchange事件肯定抛弃,因为只能失去焦点才触发. 而keyPress在Android可以触发,iOS不可以. 又不想用Android ...
- HTML5 oninput实时监听输入框值变化的完美方案
在网页开发中经常会碰到需要动态监听输入框值变化的情况,如果使用 onkeydown.onkeypress.onkeyup 这个几个键盘事件来监测的话,监听不了右键的复制.剪贴和粘贴这些操作,处理组合快 ...
- 实时监听输入框值变化:oninput & onpropertychange
结合 HTML5 标准事件 oninput 和 IE 专属事件 onpropertychange 事件来监听输入框值变化. oninput 是 HTML5 的标准事件,对于检测 textarea, i ...
随机推荐
- ButterKnife--View注入框架
俗话说,不会偷懒的程序员不是好程序员!作为一名Android的开发者,我们已经厌烦了经常写大量的findViewById以及setOnClickListener代码.而ButterKnife是一个专注 ...
- ASP.NET 路由解析
这段时间在读园子里Artech大神的<ASP.NET MVC5框架揭秘>,慢慢地从底层了解了MVC模式的设计思路.下面是一些阅读的总结. 传统的Web Forms应用,URL指向的是具体的 ...
- 为什么是梯度下降?SGD
在机器学习算法中,为了优化损失函数loss function ,我们往往采用梯度下降算法来进行优化.举个例子: 线性SVM的得分函数和损失函数分别为: ...
- solr的suggest模块
solr的suggest模块 solr有个suggest模块,用来实现下拉提醒功能,就是输入了一个文本之后,进行文本建议查找的功能. suggest请求的url http://localhost:89 ...
- JavaScript基础—插曲
Javascript基础 1:js中我们最好使用单引号,其实可以使用双引号的但是为了区别所以js中全部使用单引号.注释和C#的是一样的.网页里面的执行顺序是从上到下依次执行的,不管你js放到哪里,都会 ...
- C#:Func的同步、异步调用
using System; namespace ActionDemo { class Program { static void Main(string[] args) { Console.Write ...
- 【C#进阶系列】16 数组
首先提一下,个人在项目中已经很少用到数组了,更多的时候使用List<>. 数组大小固定,如果只是用来存放数据,专门用来读取,更改当然方便.但是更多的时候我们需要进行增删改,这个时候用Lis ...
- Eclipse使用多个Console
调试程序时,有时需要同时使用多个Console,如一个Console运行Server,一个Console运行Client.而一般情况下Eclipse只有一个Console,这时就需要增加一个Conso ...
- int和Integer的区别
int是一种数据类型,Integer是一个类,有各种方法,如Integer.parseInt(string)等.
- CSS选择器(一)
CSS选择器包括标签选择器.ID选择器.类选择器.伪类和伪对象选择器.子选择器.相邻选择器.属性选择器.通用选择器.包含选择器.分组选择器.指定选择器等选择器,分为标签选择器.ID选择器.类选择器.特 ...