input文本框強制輸入指定文字的方法以及IE11的兼容

背景：最近開發的韓國項目，在用戶姓名輸入框一欄中，要求只能輸入韓文，通常用到onkeyup和onafterpaste兩個事件來觸發方法，並在方法中進行校驗，但是在IE瀏覽器中，出現了一種情況，就是韓文單詞拼寫未完成的時候，會直接進行校驗並顯示，如下圖實例所展示，並不是需要想要的結果，所以需要進行IE兼容；

---

記錄一下整個流程：

標籤綁定事件

<input type="text"  v-model="name"  @keyup="keyup($event)" @afterpaste="keyup($event)">

標籤綁定了onkeyup鍵盤擡起事件以及onafterpaste粘貼文本進輸入框兩個事件，當有這兩個操作時，就會觸發相應的校驗方法；

---

校驗方法

keyup (ev) {
  if (!this.imeStatus) {
    ev.target.value = ev.target.value.replace(/[^ㄱ-ㅎㅏ-ㅣ가-힣A-Za-z0-9]/g, '')
  }
},

當事件觸發時，首先會有個變量imeStatus校驗是否是IE瀏覽器，然後再根據正則校驗進行輸入框值的替換，注意：替換的應該是當前正在輸入的值，並非整個輸入框包括已經輸入的所有值；

if (getBrowser() === 'IE') {
      window.addEventListener('compositionstart', () => {
        this.imeStatus = true
      }, false)
      window.addEventListener('compositionend', () => {
        this.imeStatus = false
      }, false)
    }

IE瀏覽器的校驗：如果是IE瀏覽器，則對輸入法事件進行監聽，在輸入法錄入開始時，變量imeStatus爲true，當前輸入的值不進行校驗，當輸入法輸入結束事件觸發時，說明拼寫完成，變量imeStatus爲false,進行校驗當前拼寫輸入完成的單詞；

function getBrowser () {
  const userAgent = navigator.userAgent
  if (userAgent.indexOf('OPR') > -1) {
    return 'Opera'
  }
  if (userAgent.indexOf('Firefox') > -1) {
    return 'FF'
  }
  if (userAgent.indexOf('Trident') > -1) {
    return 'IE'
  }
  if (userAgent.indexOf('Edge') > -1) {
    return 'Edge'
  }
  if (userAgent.indexOf('Chrome') > -1) {
    return 'Chrome'
  }
  if (userAgent.indexOf('Safari') > -1) {
    return 'Safari'
  }
}

對瀏覽器的判斷：navigator.userAgent獲取當前瀏覽器信息；

---

以上就是我在項目開發過程中遇到的需要兼容IE的地方；文中提到的是韓文校驗，也可以替換成其他語言，根據自己項目中的具體需求進行修改即可；