`

IE9的一个BUG:propertychange和input事件在拖拽 / 剪切 / 删除时无法触发

阅读更多
在做一个及时校验文本框输入的程序时,发现IE9这个问题,GOOGLE一下,发现也有其他人碰到了。

通常,为了最及时的获取用户对于文本输入框内容的改变,非IE浏览器、IE9以上浏览器,可以使用input事件,这个事件是最理想的一个处理方式。

对于IE6/7/8这些旧IE浏览器,通过propertychange事件也能处理。

IE9同时支持propertychange和input,却同时存在BUG。


改变输入框内容的行为有多种,主要有:

1.键盘输入(可通过keyup事件处理,但有按键不一定有改变输入的行为)

2.鼠标拖拽(可通过dragend / drop事件处理)

3.剪切(可通过cut事件处理,剪切可以通过快捷键也可以通过浏览器菜单,所以keydown/keyup靠不住)

4.粘贴(可通过paste事件处理,粘贴可以通过快捷键也可以通过浏览器菜单,所以keydown/keyup靠不住)

5.删除(悲催,并没有一个delete事件,如果是按键来删除还好办,如果是通过上下文菜单来删除,IE9下,propertychange和input都不会触发)


IE9的问题在于:

1. 按键BackSpace / 按键Delete / 拖拽 / 剪切 / 删除,不会触发propertychange和input事件
2. addEventListener绑定的propertychange事件任何情况都不会触发,但attachEvent绑定的propertychange事件则在除问题1之外的情况下能够触发。

3. 基于问题2的原因,使用jQuery绑定的propertychange事件在IE9下永远不会触发,因为它是调用addEventListener来绑定的。


要完美的处理IE9的文本框输入内容改变事件,就只剩下很丑陋的定时处理了,每隔多少个毫秒检测一次。
分享到:
评论

相关推荐

    js change,propertychange,input事件小议

    https://github.com/mootools/mootools-core/issues/2170这个问题来自IE(LTE8)中对checkbox和radio change事件的实现问题,在IE(LTE8)中测试下来,当你点击一个checkbox或者radio,它的change事件是不会立即触发,...

    js propertychange和oninput事件

    还好有propertychange(IE)和oninput事件。 oninput是标准浏览器的事件,一般应用于input元素,当input的value发生变化时就会发生,无论是键盘输入还是鼠标粘贴的改变都能即时监听到。 浏览器兼容 IE9以下是不支持...

    js与jquery实时监听输入框值的oninput与onpropertychange方法

    主要介绍了js与jquery实时监听输入框值的oninput与onpropertychange方法,实例分析了oninput与onpropertychange实现下拉框里自动匹配关键字实时监听文本框value值变化的功能,需要的朋友可以参考下

    jquery实现input输入框实时输入触发事件代码

    代码如下: //绑定商品名称联想 $(‘#productName’).bind(‘input propertychange’, function() {searchProductClassbyName();}); 代码如下: searchProductClassbyName 为触发后调用的方法; 实现效果:

    jquery 实时监听输入框值变化的完美方法(必看)

    只需要同时绑定 oninput 和 onpropertychange 两个事件,但是这并不完美 $('.input-form :input').bind('input propertychange', function() { //获取.input-form下的所有 <input> 元素,并实时监听用户输入 ...

    txtinput:跨浏览器输入事件模块

    txt输入跨浏览器输入事件模块。 它也可以作为CommonJS / AMD模块来支持。用法该模块将在全局对象上公开一个名为... 本机事件对象是IE10 +和其他现代浏览器中的input事件对象,并且可能是IE6-9中的propertychange ,

    jquery实现输入框实时输入触发事件代码

    本文主要分享了jquery实现输入框实时输入触发事件的代码,代码简单易懂,需要的朋友一起来看下吧

    让input框实现类似百度的搜索提示(基于jquery事件监听)

    挺炫的一个效果,百度和谷歌好像已实现好多年了,我以为在网上能轻易找到代码来实现这个效果。真正遇到这个需求,发现还真找不到。于是自己动手写这个效果,由于我是把效果整合到我的整套框架里,所以没有进行单独的...

    javascript开发中使用onpropertychange,oninput事件解决onchange事件的不足

    用onpropertychange,oninput事件解决onchange事件的不足,需要的朋友可以参考下。

    JQuery文本改变触发事件如聚焦事件、失焦事件

    Juery中聚焦事件: 代码如下: $(“#id”).focus(function(){ });... 文本改变事件可以这样写,propertychange是属性改变时触发事件 代码如下: $(“#id”).bind(“propertychange”,function() { });

    jQuery编写textarea输入字数限制代码

    本文实例为大家分享了jQuery textarea输入字数限制的具体代码,供大家参考,具体内容如下 ...//不要脸IE独享的事件 } var maxlength = 10;//限定输入字数 $('#Comment').bind(bind_name, function () {//给textare

    jquery keypress,keyup,onpropertychange键盘事件

    起初用js 的onkeyup事件,但始终没能触发。该事件不知道别的什么地方监视了,js的事件有传递,也可以阻断,蛮麻烦,情况太多。找了好久,终于找到了一种解决方案,通过onpropertychange事件可以迎刃而解。 代码如下:...

    第5章 JSP与JavaBean

    每次属性值改变时,这种属性就触发一个PropertyChange事件(在Java程序中,事件也是一个对象)。事件中封装了属性名、属性的原值、属性变化后的新值。这种事件传递到其他的Bean,至于接收事件的Bean应该做什么动作由...

    输入框的字数时时统计—关于 onpropertychange 和 oninput 使用

    做一个输入框的字符统计,限制输入字符数量, 即在输入框的内容发生变化的时候改统计字符长度。 跟新浪微博一样,统计字符数量,不超过140字

    jquery,js简单实现类似Angular.js双向绑定

    input ng-model=name> 你输入了: {{name}}</h1> </div> 我就想着,使用jq/js怎么实现类似的效果,后来找找,发现使用propertychange可以实现。 JQ: <textarea></textarea> <div class=miss></...

    jquery下onpropertychange事件的绑定方法

    Google了一下,找到 onpropertychange这个事件,用JS设置值也可以响应。 在Jquery里用的时候,必须要用bind。 代码如下: $(“#textboxID”).bind(“propertychange”, function() { alert($(this).val()); ...

    JS实现移动端实时监听输入框变化的实例代码

    如果是在pc端,监听输入框你可能想到focus、blur、hover、onkeyup这些事件,但是如果是在移动端使用使用这些事件用户体验极差,因为你要用户收起键盘并且再点个空白处才生效,甚至还存在很大的兼容差异。那么怎么...

    jQuery监控文本框事件并作相应处理的方法

    本文实例讲述了jQuery监控文本框事件并作相应处理的方法。分享给大家供大家参考。具体如下: //事情委托 $(document) .on('input propertychange', '#query', function(){ var input = $(this).val(); show...

Global site tag (gtag.js) - Google Analytics