教你如何解决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

阅读 2.6k

而井前端修仙传
而井前端修仙传
829 声望
1.8k 粉丝
0 条评论
829 声望
1.8k 粉丝
文章目录
宣传栏