`

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 propertychange和oninput事件

    在处理前端交互逻辑时,事件监听是一个非常核心的概念。在某些场景中,需要对输入框的值实时进行检查和响应,典型的例子包括即时搜索功能,用户在输入框中输入内容后,系统能够实时地根据输入内容给出搜索结果。这种...

    js change,propertychange,input事件小议

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

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

    oninput 事件是 HTML5 中新增的一个事件,它在用户输入内容时触发,该事件可以实时监听输入框值的变化,无需等待用户离开焦点。oninput 事件可以应用于文本框、 TEXTAREA、SELECT 等元素。 实例分析:使用 oninput ...

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

    以下知识点将详细解释如何利用jQuery为input输入框绑定一个事件,该事件在用户输入时即时响应,并执行预定义的函数。 首先,需要了解的是,传统的`keyup`事件只能在键盘按键释放时才触发,因此它不能满足实时性的...

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

    这里绑定的事件类型是`inputpropertychange`,它是一个合成事件,通常在IE浏览器中使用,因为IE浏览器不支持标准的`input`事件,所以使用`propertychange`来达到类似的效果。在现代浏览器中,应使用`input`事件来...

    JavaScript键盘事件测试小结

    同时,IE在监听事件中使用类似`YAHOO.log`的输出语句会导致Ctrl+Z/Y失效,这可能是一个IE的bug。 Safari和Firefox的行为基本一致,但也存在一些区别。例如,Safari像IE一样,只对字符键触发`keypress`。在输入法...

    中文输入法不触发onkeyup事件的解决办法

    `oninput`事件在大多数现代浏览器(包括Firefox)中支持,当`<input>`元素的`value`属性因用户输入或JavaScript操作发生变化时触发。而`onpropertychange`事件是Internet Explorer特有的,它会在元素的任何属性变化...

    js监听input输入框值的实时变化实例.docx

    - `on` 方法:jQuery 中用来绑定事件的统一方法,可同时监听多个事件。 - **优点**: - 代码简洁。 - 自动处理浏览器兼容性问题。 - **注意**: - 需确保页面已加载 jQuery 库。 - 如果页面中存在多个相同的 ID...

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

    `input`事件在用户修改输入框内容后触发,而`propertychange`事件在DOM元素的任何属性改变时触发,包括输入框的`value`属性。因此,结合这两个事件可以确保在大多数浏览器中实现跨浏览器的兼容性: ```javascript $...

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

    `onpropertychange`,`oninput` 更具有跨浏览器兼容性,但它也有一个需要注意的地方:在某些浏览器中,必须使用 `addEventListener` 方法来绑定 `oninput` 事件,而不是直接在HTML属性中设置,否则可能无法正常工作...

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

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

    使用PropertyChangeSupport监控变量

    在Java编程中,`PropertyChangeSupport` 是一个用于实现属性更改通知机制的工具类,它在JavaBeans规范中被广泛使用。这个类帮助开发者轻松地为对象添加属性变更监听器,以便在对象的属性发生变化时通知其他感兴趣的...

    jquery-inputevent:jQuery的跨浏览器oninput事件

    `jquery-inputevent`插件的核心功能是为那些不支持原生`oninput`事件的浏览器(如旧版的IE)提供一个跨浏览器的解决方案。它通过监听`propertychange`、`keyup`、`keydown`等事件,模拟实现`oninput`事件的效果,...

    在Internet Explorer 11、10、9中手动触发JavaScript事件

    在IE11、10、9中,你可以使用`fireEvent`方法来触发一个事件。例如,如果你想在某个元素上触发`click`事件,可以这样写: ```javascript var element = document.getElementById('myElement'); if (element....

    js中的onchange和onpropertychange (onchange无效的解决方法)

    `onchange` 事件是JavaScript中用于监听表单元素(如输入框、选择框等)或某些可触发改变状态的元素(如复选框)在用户进行更改后失去焦点时触发的事件。这意味着,只有当用户改变了元素的值,并且将焦点移出该元素...

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

    在原生JavaScript中,文本改变可以通过`.change()`方法来监听,但这个方法主要适用于表单元素,如`<input>`、`<select>`、`<textarea>`等,在它们的值被修改并失去焦点时触发。对于文本内容的变化监听,原生...

Global site tag (gtag.js) - Google Analytics