中文輸入截斷問題

前幾天一個項目中須要對一個輸入框輸入進行限制，不能輸入數字，能夠輸入漢字字母其餘字符等。
心想這個不難，便隨手寫下了以下代碼：

const inputEle = document.querySelector('#input')
    const idReg = /[0-9]/g
    inputEle.addEventListener('input', function(e){
        let value = e.target.value

        value = value.replace(idReg, '')
        inputEle.value = value
    })

可是等提到測試環境後，結果被測試同窗發如今中文輸入法下回出現以下問題：

IME問題

最終尋找一番後發現，原來這是IME問題，即中文輸入時出如今輸入框上方的帶候選但還未選擇的狀態，其實這個在韓文日文等非字母文字中都會出現這個問題。
那如何解決呢。

用搜索引擎一搜索，便看到了有人說能夠經過compositionstart和compositionend判斷是否處於IME狀態。可是這個兩個函數歷來沒見過，敢用嗎？兼容性如何？

因而便到caniuse和MDN上看看。

caniuse上根本就沒沒有這個函數的兼容性報告，MDN上雖說能夠用，可是內心仍是沒底。
這時想到vue文檔中好像提過關於中文輸入，因而立刻就翻了翻vue的文檔。

在vue源碼中尋找答案

vue文檔中有以下一段話

對於須要輸入法編輯器的語言（中文、日文、韓文等），要注意的是，在 IME 字母組合窗口輸入時 v-model 並不會更新。若是你想在此期間知足更新需求，請使用 input 事件。

說明vue解決了這個問題，那vue是怎麼實現的，是使用compositionstart和compositionend，仍是其餘方法？因而帶着疑問道vue的源碼中尋找答案。

在關於v-model相關代碼中很快就看到了這行代碼

if (needCompositionGuard) {
    code = `if($event.target.composing)return;${code}`
  }

可是很明顯composing不是event.target的標準屬性，那是從哪裏來的呢，因而全局搜索了composing，很快在這裏找到了答案。

function onCompositionStart (e) {
      e.target.composing = true
    }
    
    function onCompositionEnd (e) {
      e.target.composing = false
      trigger(e.target, 'input')
    }

而這兩個函數是在哪裏被調用的呢？就在當前文件內一搜索就找到了。

el.addEventListener('compositionstart', onCompositionStart)
  el.addEventListener('compositionend', onCompositionEnd)

哈哈，原來就是前面所說的compositionstart和compositionend方法。

結論

既然vue中使用的就是compositionstart和compositionend方法，而且通過這麼多人檢驗，確定是沒問題的，能夠在項目中放心的使用。

雖然一開始就找到了正確的答案，可是後面的求證纔是最有價值的。