背景:最近開發的韓國項目,在用戶姓名輸入框一欄中,要求只能輸入韓文,一般用到onkeyup和onafterpaste兩個事件來觸發方法,並在方法中進行校驗,可是在IE瀏覽器中,出現了一種狀況,就是韓文單詞拼寫未完成的時候,會直接進行校驗並顯示,以下圖實例所展現,並非須要想要的結果,因此須要進行IE兼容;
瀏覽器
記錄一下整個流程:ide
<input type="text" v-model="name" @keyup="keyup($event)" @afterpaste="keyup($event)">
標籤綁定了onkeyup鍵盤擡起事件以及onafterpaste粘貼文本進輸入框兩個事件,當有這兩個操做時,就會觸發相應的校驗方法;this
keyup (ev) { if (!this.imeStatus) { ev.target.value = ev.target.value.replace(/[^ㄱ-ㅎㅏ-ㅣ가-힣A-Za-z0-9]/g, '') } },
當事件觸發時,首先會有個變量imeStatus校驗是不是IE瀏覽器,而後再根據正則校驗進行輸入框值的替換,注意:替換的應該是當前正在輸入的值,並不是整個輸入框包括已經輸入的全部值;spa
if (getBrowser() === 'IE') { window.addEventListener('compositionstart', () => { this.imeStatus = true }, false) window.addEventListener('compositionend', () => { this.imeStatus = false }, false) }
IE瀏覽器的校驗:若是是IE瀏覽器,則對輸入法事件進行監聽,在輸入法錄入開始時,變量imeStatus爲true,當前輸入的值不進行校驗,當輸入法輸入結束事件觸發時,說明拼寫完成,變量imeStatus爲false,進行校驗當前拼寫輸入完成的單詞;code
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的地方;文中提到的是韓文校驗,也能夠替換成其餘語言,根據本身項目中的具體需求進行修改便可;開發