input 的 compositionstart 和 compositionend 事件（禁止非直接輸入）

在 web 開發中，我們通常需要對輸入的內容進行校驗。這段代碼雖然執行起來沒有什么問題，但是會產生非直接輸入，比方說我們輸入“樹莓派”，中間過程會輸入拼音，每次輸入字母都會觸發input事件，然而當中文輸入完成之前，都屬於非直接輸入。

未禁止非直接輸入

 

 

 可以看到，當我們輸入 “樹莓派” 時，觸發了9次 input 事件，這並非是我們想要的結果，我們希望直接輸入(中文輸入完成)后，再觸發 input 的業務邏輯，此時就需要引入其他兩個事件 compositionstart 和 compositionend

事件解釋

• compositionstart
  是指中文輸入法開始輸入觸發，每次輸入開始僅執行一次，執行的開始是 end 事件結束了才會觸發

• compositonupdate
  是指中文輸入法在輸入時觸發，也就是可能得到 shu’mei 這種內容，這里返回的內容是實時的，僅在 start 事件觸發后觸發，輸入時實時觸發

• compositionend
  是指中文輸入法輸入完成時觸發，這是得到的結果就是最終輸入完成的結果，此事件僅執行一次。
  需要特別注意的是：該事件觸發順序在 input 事件之后，故而需要在此事件的處理邏輯里調用一次 input 里邊的業務邏輯

禁止非直接輸入

// 添加標記位 lock ,當用戶未輸入完時，lock 為 true
var lock = false;
var inputEle = document.getElementById('inputEle');
// input 事件中的處理邏輯, 這里僅僅打印文本
var todo = function (text) {
    console.log(text)
};
inputEle.addEventListener('compositionstart', function () {
    lock = true;
});
inputEle.addEventListener('compositionend', function (event) {
    lock = false;
    // compositionend 事件發生在 input 之后，故此需要此處調用 input 中邏輯
    todo(event.target.value);
});
inputEle.addEventListener('input', function (event) {
    // 忽略一切非直接輸入，不做邏輯處理
    if (!lock) todo(event.target.value);
});

 

可以看到，此時已經過濾了全部非直接輸入，只有當用戶輸入中文結束時才會觸發 input 中的業務邏輯 ~