遇到如此需求,首先想到的是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. 解决telnet不是内部命令

    1.telnet在win7下默认是不开启的,所以需要我们自己手动开启.那么首先我们点击开始菜单,找到控制面板项,点击进入: 2.进入程序和功能模块,我们在左边需要选择“打开或关闭windows功能”, ...

  2. MathExam V2.0

    # 隔壁村小学的小朋友都羡慕哭了2.0版 一.预估与实际 PSP2.1 Personal Software Process Stages 预估耗时(分钟) 实际耗时(分钟) Planning 计划 1 ...

  3. NO.1: 视C++为一个语言联邦

    C++由4个部分组成: 1.C part of C++; 2.Object-Oriented C++; 3.Template C++; 4.STL 请记住:C++的高效编程视状况而变化,取决你使用C+ ...

  4. Hadoop生态圈-zookeeper的API用法详解

    Hadoop生态圈-zookeeper的API用法详解 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.测试前准备 1>.开启集群 [yinzhengjie@s101 ~] ...

  5. openstack项目【day23】:虚拟化介绍

    本节内容 一 什么是虚拟化 二 为何要学习虚拟化 三 虚拟化技术主要分类(了解) 四 平台虚拟化技术又可以细分(了解) 一 什么是虚拟化 虚拟化说白了就是本来是一个完整的资源,切分或者说虚拟成多份,让 ...

  6. Kafka 0.8 Consumer设计解析

    摘要 本文主要介绍了Kafka High Level Consumer,Consumer Group,Consumer Rebalance,Low Level Consumer实现的语义,以及适用场景 ...

  7. 深入了解C指针

      前言:复杂类型说明 要了解指针,多多少少会出现一些比较复杂的类型,所以我先介绍一下如何完全理解一个复杂类型,要理解复杂类型其实很简单,一个类型里会出现很多运算符,他们也像普通的表达式一样,有优先级 ...

  8. 20155238 2016-2017-2 《Java程序设计》第五周学习总结

    教材学习内容总结 Java语言中所有的错误都会包装为对象.使用try.catch可以对对象做处理. 设计错误对象都继承自java.lang.Throwable类.Throwable定义了取得错误信息, ...

  9. [python]使用python实现Hadoop MapReduce程序:计算一组数据的均值和方差

    这是参照<机器学习实战>中第15章“大数据与MapReduce”的内容,因为作者写作时hadoop版本和现在的版本相差很大,所以在Hadoop上运行python写的MapReduce程序时 ...

  10. MFS - MooseFS 文件系统

    MFSMooseFS 文件系统 可以实现RAID 功能:节约成本 实现在线扩展:是一种半分布式文件系统. 一.MFS文件系统的组成 1.mfsmaster 元数据服务器. 在整个体系中负责管理管理文件 ...