[转] 实时监听input输入的变化(兼容主流浏览器)
遇到如此需求,首先想到的是change事件,但用过change的都知道只有在input失去焦点时才会触发,并不能满足实时监测的需求,比如监测用户输入字符数。
在经过查阅一番资料后,欣慰的发现firefox等现代浏览器的input有oninput这一属性,可以用三种方式使用它:
1,内嵌元素方式(属性编辑方式)
<input id="test" oninput="console.log('input');" type="text" />
2,句柄编辑方式
document.getElementById('test').oninput=function(){
console.log('input');
}
3,事件侦听方式(jquery)
$('#test').on('input',function(){
console.log('input');
})
但是,以上代码仅在除了ie的浏览器大大们里才work,那ie该怎么处理呢? 在ie中有一个属性叫做onpropertychange:
<input id="test" onpropertychange="alert('change');" type="text" />
经过调试后马上就会发现,这个属性是在元素的任何属性变化时都会起作用,包括我们这里所提到的value,但至少是起作用了,那接下来的任务就是筛选出property为value的变化。
document.getElementById('test').attachEvent('onpropertychange',function(e) {
if(e.propertyName!='value') return;
$(that).trigger('input');
});
在上面代码中的回调函数中会传入一个参数,为该事件,该事件有很多属性值,搜寻一下可以发现有一个我们很关心的,叫做propertyName,也就是当前发生变化的属性名称。然后就相当简单了,只要在回调函数中判断一下是否为我们所要的value,是的话就trigger一下‘input’事件。
然后,就可以在主流浏览器中统一用这样的方式来监听‘input’事件了。
$('#test').on('input',function(){
alert('input');
})
最后贴上完整代码:

$('#test').on('input',function(){
alert('input');
}) //for ie
if(document.all){
$('input[type="text"]').each(function() {
var that=this; if(this.attachEvent) {
this.attachEvent('onpropertychange',function(e) {
if(e.propertyName!='value') return;
$(that).trigger('input');
});
}
})
}

[转] 实时监听input输入的变化(兼容主流浏览器)的更多相关文章
- 实时监听input输入的变化(兼容主流浏览器)【转】
遇到如此需求,首先想到的是change事件,但用过change的都知道只有在input失去焦点时才会触发,并不能满足实时监测的需求,比如监测用户输入字符数. 在经过查阅一番资料后,欣慰的发现firef ...
- 实时监听input输入的变化(兼容主流浏览器)
遇到如此需求,首先想到的是change事件,但用过change的都知道只有在input失去焦点时才会触发,并不能满足实时监测的需求,比如监测用户输入字符数. 在经过查阅一番资料后,欣慰的发现firef ...
- js 实时监听input中值变化
注意:用到了jquery需要引入jquery.min.js. 需求: 1.每个地方需要分别打分,总分为100; 2.第一个打分总分为40; 3.第二个打分总分为60. 注意:需要判断null.&quo ...
- 实时监听input输入内容的N种方法
现在有一个需求,需要我们实时监听input输入框中的内容,从而带来更好的用户体验,而不是等我们全部输入完毕才告诉我们格式不对首先我们创建一个input输入框 <form name='loginF ...
- 使用jQuery实时监听input输入值的变化
//jQuery实时监听input值变化 $("#email").on("input propertychange",function(){ var str = ...
- jq 实时监听input输入框的变化
项目需求中有时候需要实时监测 input 的值变化,虽然 input 自身有 focus 和 blur 事件,但是有时候跟需求不符合. 所以实时监听 input 值变化的代码为: $("#i ...
- jQuery实时监听input的值变化(input的值产生变化才会触发事件)
//用于监听input的值变化(input的值产生变化才会触发事件) (function ($) { $.fn.watch = function (callback) { return this.ea ...
- 关于实时监听input的值得变化的问题
onchange 关于input的onchange事件 其实是有出发条件的 并非实时监听的 1.鼠标点击事件 或者键盘事件(tab和wins键都可以触发 enter在ie9时不触发,火狐和ch ...
- Js/jQuery实时监听input输入框值变化
前言在做web开发时候很多时候都需要即时监听输入框值的变化,以便作出即时动作去引导浏览者增强网站的用户体验感.而采用onchange时间又往往是在输入框失去焦点(onblur)时候触发,有时候并不能满 ...
随机推荐
- oracle 配置本地Net服务
1.查看当前数据库名字(前提是已经创建了),先前忘记数据库实例名乱输,然后创建一直失败 开始,程序,Oracle_xxxx_home1 ,配置和移植工具, Database Configuration ...
- 【刷题】BZOJ 2095 [Poi2010]Bridges
Description YYD为了减肥,他来到了瘦海,这是一个巨大的海,海中有n个小岛,小岛之间有m座桥连接,两个小岛之间不会有两座桥,并且从一个小岛可以到另外任意一个小岛.现在YYD想骑单车从小岛1 ...
- 【BZOJ1559】[JSOI2009]密码(AC自动机,动态规划,搜索)
[BZOJ1559][JSOI2009]密码(AC自动机,动态规划,搜索) 题面 BZOJ 洛谷 题解 首先求方案数显然是构建\(AC\)自动机之后再状压\(dp\),似乎没有什么好讲的. 现在考虑答 ...
- 洛谷 P2527 [SHOI2001]Panda的烦恼 解题报告
P2527 [SHOI2001]Panda的烦恼 题目描述 panda是个数学怪人,他非常喜欢研究跟别人相反的事情.最近他正在研究筛法,众所周知,对一个范围内的整数,经过筛法处理以后,剩下的全部都是质 ...
- 51nod 1450 闯关游戏
首先肯定要先把所有的关卡打通后去找两星几率最大的关卡刷星(论打游戏经验的重要性). 所以从两星几率小的关打起,记录当前拿到x个星星的几率和当前走过的期望步数,如果发现剩下的关必须全两星,就直接计算答案 ...
- WPF 杂谈——开篇简言
这俩年多来笔者一直在从事关于WPF的开发.虽然不能说是专家级别的.但是对于WPF的应用还是有一定的了解.论他的灵活性决对不在WinForm之下.WPF的出现更是引发一段热议.他的何去何从更是让很多人感 ...
- Mac 显示sudo: pip: command not found
Mac显示sudo: pip: command not found mac在安装完pip模块后,使用pip命令会提示sudo: pip: command not found moyanzhudeMac ...
- ASP.NET MVC 此安装不支持该项目类型解决方法
http://www.cnblogs.com/younggun/archive/2011/03/03/1969498.html ASP.NET MVC 此安装不支持该项目类型解决方法 打开 .csp ...
- CSS框架960Grid从入门到精通一步登天
http://blog.chinaunix.net/uid-22414998-id-2878529.html 1.什么是CSS框架? CSS框架是一种你能够使用在你的web项目中概念上的结构, ...
- Hadoop生态圈-kafka事务控制以及性能测试
Hadoop生态圈-kafka事务控制以及性能测试 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任.