圖片來源：梗圖倉庫
有些人自己開車也會暈車。

本篇紀錄與符文輸入有關之三不可思議事件：compositionstart、compositionupdate與compositionend事件，並結合三事件示例一操術法。

事件其廿五：compositionstart

此事件於文字組織系統 (text composition system) 被啟動時發生。

規範原文：
A user agent MUST dispatch this event when a text composition system is enabled and a new composition session is about to begin (or has begun, depending on the text composition system) in preparation for composing a passage of text.

而根據MDN的紀錄，輸入方式編輯器 (Input Method Editor, IME) 即屬文字組織系統 (text composition system) 之一形式，而IME則常於以下情況被使用：

1. 輸入中文、日文、韓文時之拉丁鍵石板 (或是精靈文鍵石板？)
2. 輸入拉丁文時之數字鍵石板
3. 於可觸碰之介面以手指比劃方式輸入文字時之筆劃辨識系統。

MDN：
An Input Method Editor (IME) is a program that provides a specialized user interface for text input. Input method editors are used in many situations:

• To enter Chinese, Japanese, or Korean text using a Latin keyboard.
• To enter Latin text using a numeric keypad.
• To enter text on a touch screen using handwriting recognition.

事件其廿六：compositionupdate

此事件於正處於啟動狀態之文字組織系統 (text composition system) 被更新字符時發生，而其字符內容儲存於CompositionEvent.data。

規範原文：
A user agent SHOULD dispatch this event during a composition session when a text composition system updates its active text passage with a new character, which is reflected in the string in data.

事件其廿七：compositionend

此事件於正處於啟動狀態之文字組織系統 (text composition system) 完成當前之處理階段，或當前之處理階段被取消之時發生。例如IME被關閉、或是取消受矚之狀態等。

規範原文：
A user agent MUST dispatch this event when a text composition system completes or cancels the current composition session,...
This event is dispatched immediately after the text composition system completes the composition session (e.g., the IME is closed, minimized, switched out of focus, or otherwise dismissed, and the focus switched back to the user agent)

以下示例模擬以鍵石輸入中文時，介面顯示正在輸入訊息之提示，並於介面紀錄每一文字組織系統之處理階段之內容。

const container = document.querySelector(".container");
const statusText = document.querySelector(".text");
const textarea = document.querySelector(".textarea");

let inputText;

function showStatus() {
  statusText.style.display = "block";

  inputText = document.createElement("p");
  container.insertBefore(inputText, null);
}

function showInputText(event) {
  if (event.data !== "") {
    inputText.textContent = event.data;
  }
}

function hideStatus() {
  statusText.style.display = "none";
}

textarea.addEventListener("compositionstart", showStatus);
textarea.addEventListener("compositionupdate", showInputText);
textarea.addEventListener("compositionend", hideStatus);

分段註釋如下：
選取容器元素、狀態文字元素以及文字輸入處元素。

const container = document.querySelector(".container");
const statusText = document.querySelector(".text");
const textarea = document.querySelector(".textarea");

定義函式之術名showStatus，內容為顯示狀態文字。

定義一變數inputText，為段落元素之用，並於函式之術showStatus內操一術使容器元素內添加此段落元素。

let inputText;

function showStatus() {
  statusText.style.display = "block";

  inputText = document.createElement("p");
  container.insertBefore(inputText, null);
}

定義函式之術名showInputText，內容為更改段落元素inputText之文字內容，而文字內容則由事件之data屬性取得。
inputText.textContent = event.data;

function showInputText(event) {
  if (event.data !== "") {
    inputText.textContent = event.data;
  }
}

定義函式之術名hideStatus，內容為隱藏狀態文字。

function hideStatus() {
  statusText.style.display = "none";
}

最後於文字輸入處元素設定三事件觀測器，若發生之事件為compositionstart事件，則施以函式之術showStatus；若發生之事件為compositionupdate事件，則施以函式之術showInputText；若發生之事件為compositionend事件，則施以函式之術hideStatus。

textarea.addEventListener("compositionstart", showStatus);
textarea.addEventListener("compositionupdate", showInputText);
textarea.addEventListener("compositionend", hideStatus);

當鍵石板開始輸入中文符文，啟動IME，開啟一文字組織系統之處理階段，因而觸發compositionstart事件，於文字輸入處下方顯示「正在輸入訊息」之狀態提示；每當輸入一精靈符文，皆會觸發compositionupdate事件，而使文字輸入處下方之段落元素改變內容；輸入完畢時，按壓Enter鍵石，結束當前之處理階段，因而觸發compositionend事件，使「正在輸入訊息」之狀態提示消失。

示例處

示例之術式

https://github.com/CReticulata/2024ithome/tree/main/Day24

翻譯

元素：element
鍵石：鍵盤按鍵
鍵石板：鍵盤，keyboard

相關連結

• compositionstart - w3.org
• IME - MDN
• compositionupdate - w3.org
• compositionend - w3.org