遇到如此需求,首先想到的是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');
});
}
})
}

来自:友e客

参考资料:

监听输入框值的即时变化onpropertychange、oninput

有关onpropertychange事件

实时监听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. SPI Flash(W25Q16DV) 基本操作

    读取厂家\设备 ID 发送 90H 指令,再发送 00h 的地址,然后接收即可. 代码如下: void SPIFlashReadID(int *pMID, int *pDID) { SPIFlash_ ...

  2. Maven之setting.xml配置文件详解

    setting.xml配置文件 maven的配置文件settings.xml存在于两个地方: 1.安装的地方:${M2_HOME}/conf/settings.xml 2.用户的目录:${user.h ...

  3. MapReduce核心 - - - Shuffle

    大数据名词(1) -Shuffle     Shuffle过程是MapReduce的核心,也被称为奇迹发生的地方.要想理解MapReduce, Shuffle是必须要了解的.我看过很多相关的资料,但每 ...

  4. Ajax实现的城市二级联动二

    上一篇联动一种只是城市用ajax请求获取并渲染,这里将省份也用ajax请求并渲染 1.HTML <select id="province"> <option> ...

  5. Wepy在VScode中的高亮显示

    小程序的wepy框架会生成后缀名为.wpy的文件,此文件用VScode打开时并不是高亮的,官方文档给我们提供了两种方案进行高亮 方案一:   1. 在 Code 里先安装 Vue 的语法高亮插件 Ve ...

  6. python之while循环/格式化输出/运算符/初始编码/成员变量

    一.主要内容:1.while 循环 (难点)while 条件: 循环体 break: 直接跳出循环continue:停止当前本次循环,继续执行下一次循环.不会中断循环能让循环退出:(1)break ( ...

  7. ionic3 细节注意

    一.图标和splash大小不一样 icon图标的大小尽量为1024*1024,并且不能为圆角. splash图片的大小尽量为2732*2732,ionic1的大小为2208*2208

  8. Spark jdbc postgresql数据库连接和写入操作源码解读

    概述:Spark postgresql jdbc 数据库连接和写入操作源码解读,详细记录了SparkSQL对数据库的操作,通过java程序,在本地开发和运行.整体为,Spark建立数据库连接,读取数据 ...

  9. 如何在服务器上搭建svn

    svn现在依然是一个流行的版本控制工具,但是大多数的人员只会使用客户端,并且也知道可以进行权限控制, 那么今天,我们就来给大家梳理一下 1.如何搭建svn的服务器 2.如何进行svn的权限控制 === ...

  10. 【转】HTTP协议之multipart/form-data请求分析

    原文链接:http://blog.csdn.net/five3/article/details/7181521 首先来了解什么是multipart/form-data请求: 根据http/1.1 rf ...