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

文章起因

看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