中文輸入法、文字複合 CompositionEvent 事件監聽

DOM 接口組合 IME 中文輸入時的監聽事件 compositionstart、compositionupdate、compositionend。平常對輸入框的 Event 監聽輸入框的文字變化，多會透會使用 keydown、keypress、keyup 等鍵盤事件來判斷。於 MDN 發現一個 CompositionEvent 表示用戶間接輸入文本（如使用輸入法）時發生的事件。

Composition Event 主要有「三個」監聽事件

compositonstart : 在輸入框內開啟中文輸入文字時觸發，表示「正在拼字」時觸發。

compositionupdate : 在向輸入框內中插入新字元時觸發，表示「正在拼字或選字時」時觸發。

compositionend : 在輸入框內「完成」或關閉時觸發，表示最後一刻送出至輸入框時觸發。

中文輸入的事件監聽、主要有三個事件名稱可以監聽組合輸入的事件，下方的實例測試或是自己訂製一個相關詞的案例。

const inputElement = document.querySelector("div.composition-event input[type='text']");
const Log_Textarea = document.querySelector("div.composition-event textarea");

function handleEvent(event) {
  Log_Textarea.textContent = Log_Textarea.textContent + "Event = " + event.type + ", Data = " + event.data + "\n";
}

inputElement.addEventListener("compositionstart", handleEvent);
inputElement.addEventListener("compositionupdate", handleEvent);
inputElement.addEventListener("compositionend", handleEvent);