教你怎样处理IE9的输入框input事宜没法监听右键菜单的剪切、打消、删除对内容的转变的题目

2023年5月20日 105次阅读 来源: 而井

文章原由

看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

    原文作者：而井
    原文地址: https://segmentfault.com/a/1190000017381727
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞