教你如何解決IE9的輸入框input事件無法監聽右鍵菜單的剪切、撤銷、刪除對內容的改變的問題

沈建明發布于2019-08-23 14:04 / 1396人閱讀

摘要：原來對全局的事件進行監聽，一旦發現就會嘗試觸發當前文檔激活對象的事件。事件需要注意的點事件只能綁定在接口對象上，其他元素綁定無效，而且不可以取消也不能冒泡需要注意的是上右鍵菜單的剪切并不會觸發事件瀏覽器從開始支持相關文檔

文章起因

看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

GPU云服務器云服務器 js設置輸入框的事件解決阿里云服務器無法訪問80端口的問題 js的禁止輸入框輸入 python的輸入框

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/100035.html

input標簽內容改變觸發的事件

摘要：原生方法事件事件在內容改變且失去焦點的時候觸發。直接更改值時不觸發事件事件在輸入內容改變的時候實時觸發。與聯合使用是的標準事件，對于檢測和這幾個元素通過用戶界面發生的內容變化非常有用，在內容修改后立即被觸發，不像事件需要失去焦點才觸發。原生方法 onchange事件 function onc(data){ console.log(data.value); } onchang...

sanyang 2019-08-26 13:22 評論0 收藏0
前端er怎樣操作剪切復制以及禁止復制+破解等

摘要：取消默認的復制事件被復制的文字等下插入防知乎掘金復制一兩個字則不添加版權信息超過一定長度的文字就添加版權信息作者鏈接來源掘金著作權歸作者所有。以上參考資料高程操作剪貼板網頁上如何實現禁止復制粘貼以及如何破解原生實現點擊按鈕復制文本 showImg(https://segmentfault.com/img/remote/1460000015942602?w=1280&h=720); 前言...

mikasa 2019-08-29 16:20 評論0 收藏0
前端er怎樣操作剪切復制以及禁止復制+破解等

摘要：取消默認的復制事件被復制的文字等下插入防知乎掘金復制一兩個字則不添加版權信息超過一定長度的文字就添加版權信息作者鏈接來源掘金著作權歸作者所有。以上參考資料高程操作剪貼板網頁上如何實現禁止復制粘貼以及如何破解原生實現點擊按鈕復制文本 showImg(https://segmentfault.com/img/remote/1460000015942602?w=1280&h=720); 前言...

amuqiao 2019-08-23 10:51 評論0 收藏0
前端er怎樣操作剪切復制以及禁止復制+破解等

摘要：取消默認的復制事件被復制的文字等下插入防知乎掘金復制一兩個字則不添加版權信息超過一定長度的文字就添加版權信息作者鏈接來源掘金著作權歸作者所有。以上參考資料高程操作剪貼板網頁上如何實現禁止復制粘貼以及如何破解原生實現點擊按鈕復制文本 showImg(https://segmentfault.com/img/remote/1460000015942602?w=1280&h=720); 前言...

DevTalking 2019-08-02 11:11 評論0 收藏0