IE 9の入力ボックスinputイベントが右クリックメニューの切り取り、取り消し、削除を傍受できない問題を解決する方法を教えます.
1772 ワード
文章の起因.
Vueソースコード内蔵命令を見ていると、VueがIE 9の
どうしてこんなに互換性があるの?
従来の
selectionchangeイベントの注意点 は、 IEブラウザはIE 9からサポートを開始する.
関連ドキュメント
selectionchange
DocumentOrShadowRoot.activeElement
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
イベントをトリガーしないことに注意しなければならない.関連ドキュメント
selectionchange
DocumentOrShadowRoot.activeElement