教你如何解决IE9的输入框input事件无法监听右键菜单的剪切、撤销、删除对内容的改变的问题

35次阅读

共计 1044 个字符,预计需要花费 3 分钟才能阅读完成。

文章起因
看 Vue 源代码内置指令时,发现了 Vue 对于 IE9 的 selectionchange 事件做了特殊处理,这引起了我的兴趣。原来 Vue 对全局的 selectionchange 事件进行监听,一旦发现就会尝试触发 document.activeElement 当前文档激活对象的 input 事件。具体代码如下:
src/core/util/env.js
export const inBrowser = typeof window !== ‘undefined’
export const UA = inBrowser && window.navigator.userAgent.toLowerCase()
export const isIE = UA && /msie|trident/.test(UA)
export const isIE9 = UA && UA.indexOf(‘msie 9.0’) > 0
src/platforms/web/runtime/directives/model.js
if (isIE9) {
document.addEventListener(‘selectionchange’, () => {
const el = document.activeElement
if (el && el.vmodel) {
trigger(el, ‘input’)
}
})
}
function trigger (el, type) {
const e = document.createEvent(‘HTMLEvents’)
e.initEvent(type, true, true)
el.dispatchEvent(e)
}
为什么要这样兼容
原来 IE9 输入框 input 事件无法监听到键盘的 backspace 键和 delete 键对内容的改变,以及右键菜单的剪切、撤销、删除对内容的改变,用 keyup 事件我们可以解决键盘 backspace 键 delete 键的问题,但是对于右键对于文本的操作还是无能为力,还好有 selectionchange 事件,它可以在文档上的当前文本选择被改变时触发,例如文本选择、剪切、删除、粘贴等操作。
selectionchange 事件需要注意的点

selectionchange 事件只能绑定在 Document 接口对象上,其他元素绑定无效,而且不可以取消、也不能冒泡;
需要注意的是 Chrome 上右键菜单的剪切并不会触发 selectionchange 事件;
IE 浏览器从 IE9 开始支持;

相关文档
selectionchange
DocumentOrShadowRoot.activeElement

正文完
 0