遇到如此需求,首先想到的是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输入的变化(兼容主流浏览器)的更多相关文章

  1. 实时监听input输入的变化(兼容主流浏览器)【转】

    遇到如此需求,首先想到的是change事件,但用过change的都知道只有在input失去焦点时才会触发,并不能满足实时监测的需求,比如监测用户输入字符数. 在经过查阅一番资料后,欣慰的发现firef ...

  2. 实时监听input输入的变化(兼容主流浏览器)

    遇到如此需求,首先想到的是change事件,但用过change的都知道只有在input失去焦点时才会触发,并不能满足实时监测的需求,比如监测用户输入字符数. 在经过查阅一番资料后,欣慰的发现firef ...

  3. js 实时监听input中值变化

    注意:用到了jquery需要引入jquery.min.js. 需求: 1.每个地方需要分别打分,总分为100; 2.第一个打分总分为40; 3.第二个打分总分为60. 注意:需要判断null.&quo ...

  4. 实时监听input输入内容的N种方法

    现在有一个需求,需要我们实时监听input输入框中的内容,从而带来更好的用户体验,而不是等我们全部输入完毕才告诉我们格式不对首先我们创建一个input输入框 <form name='loginF ...

  5. 使用jQuery实时监听input输入值的变化

    //jQuery实时监听input值变化 $("#email").on("input propertychange",function(){ var str = ...

  6. jq 实时监听input输入框的变化

    项目需求中有时候需要实时监测 input 的值变化,虽然 input 自身有 focus 和 blur 事件,但是有时候跟需求不符合. 所以实时监听 input 值变化的代码为: $("#i ...

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

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

  8. 关于实时监听input的值得变化的问题

    onchange 关于input的onchange事件  其实是有出发条件的  并非实时监听的 1.鼠标点击事件  或者键盘事件(tab和wins键都可以触发  enter在ie9时不触发,火狐和ch ...

  9. Js/jQuery实时监听input输入框值变化

    前言在做web开发时候很多时候都需要即时监听输入框值的变化,以便作出即时动作去引导浏览者增强网站的用户体验感.而采用onchange时间又往往是在输入框失去焦点(onblur)时候触发,有时候并不能满 ...

随机推荐

  1. oracle 配置本地Net服务

    1.查看当前数据库名字(前提是已经创建了),先前忘记数据库实例名乱输,然后创建一直失败 开始,程序,Oracle_xxxx_home1 ,配置和移植工具, Database Configuration ...

  2. 【刷题】BZOJ 2095 [Poi2010]Bridges

    Description YYD为了减肥,他来到了瘦海,这是一个巨大的海,海中有n个小岛,小岛之间有m座桥连接,两个小岛之间不会有两座桥,并且从一个小岛可以到另外任意一个小岛.现在YYD想骑单车从小岛1 ...

  3. 【BZOJ1559】[JSOI2009]密码(AC自动机,动态规划,搜索)

    [BZOJ1559][JSOI2009]密码(AC自动机,动态规划,搜索) 题面 BZOJ 洛谷 题解 首先求方案数显然是构建\(AC\)自动机之后再状压\(dp\),似乎没有什么好讲的. 现在考虑答 ...

  4. 洛谷 P2527 [SHOI2001]Panda的烦恼 解题报告

    P2527 [SHOI2001]Panda的烦恼 题目描述 panda是个数学怪人,他非常喜欢研究跟别人相反的事情.最近他正在研究筛法,众所周知,对一个范围内的整数,经过筛法处理以后,剩下的全部都是质 ...

  5. 51nod 1450 闯关游戏

    首先肯定要先把所有的关卡打通后去找两星几率最大的关卡刷星(论打游戏经验的重要性). 所以从两星几率小的关打起,记录当前拿到x个星星的几率和当前走过的期望步数,如果发现剩下的关必须全两星,就直接计算答案 ...

  6. WPF 杂谈——开篇简言

    这俩年多来笔者一直在从事关于WPF的开发.虽然不能说是专家级别的.但是对于WPF的应用还是有一定的了解.论他的灵活性决对不在WinForm之下.WPF的出现更是引发一段热议.他的何去何从更是让很多人感 ...

  7. Mac 显示sudo: pip: command not found

    Mac显示sudo: pip: command not found mac在安装完pip模块后,使用pip命令会提示sudo: pip: command not found moyanzhudeMac ...

  8. ASP.NET MVC 此安装不支持该项目类型解决方法

    http://www.cnblogs.com/younggun/archive/2011/03/03/1969498.html ASP.NET MVC  此安装不支持该项目类型解决方法 打开 .csp ...

  9. CSS框架960Grid从入门到精通一步登天

    http://blog.chinaunix.net/uid-22414998-id-2878529.html 1.什么是CSS框架?     CSS框架是一种你能够使用在你的web项目中概念上的结构, ...

  10. Hadoop生态圈-kafka事务控制以及性能测试

    Hadoop生态圈-kafka事务控制以及性能测试 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任.