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

DOM 接口組合 IME 中文輸入時的監聽事件 compositionstartcompositionupdatecompositionend。平常對輸入框的 Event 監聽輸入框的文字變化,多會透會使用 keydownkeypresskeyup 等鍵盤事件來判斷。於 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);