IE 9の入力ボックスinputイベントが右クリックメニューの切り取り、取り消し、削除を傍受できない問題を解決する方法を教えます.

1772 ワード

文章の起因.
Vueソースコード内蔵命令を見ていると、VueがIE 9の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ブラウザはIE 9からサポートを開始する.

  • 関連ドキュメント
    selectionchange
    DocumentOrShadowRoot.activeElement