圖片來源：派星機
好久不見派星機（沒有好久

前篇閱畢或有疑惑，若輸入之符文不需啟動IME，如輸入英文、數字、符號等，此時何解？故本篇紀錄其他與輸入有關之不可思議事件：change事件。

事件其廿八：change

此事件發生於<input>、<select>及 <textarea> 等元素之值遭受更改之時。例如核箱型態之<input>元素 (<input type="checkbox">) 於鼠輩確認或取消確認時觸發change事件；單選型態之<input>元素 (<input type="radio">) 於鼠輩選取時觸發change事件；文字輸入型態之元素 (例如<text>、<textarea>...)，於值更改後失去矚目之時觸發change事件。

MDN：
The change event is fired for <input>, <select>, and <textarea> elements when the user modifies the element's value.

以下示例改造前篇之示例，試用觀測change事件使介面顯示正在輸入訊息之提示。

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

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

textarea.addEventListener("change", showStatus);

修改之術式註釋如下：
設定事件觀測器於文字輸入處元素觀測change事件，並施以showStatus函式之術。

textarea.addEventListener("change", showStatus);

然結果為輸入完畢後，鼠輩點按文字輸入處元素以外之處，使文字輸入處元素取消受矚之時，才於文字輸入處下方顯示「正在輸入訊息」之狀態提示，不符世人之常觀。

故change事件較適於檢測最終輸入之結果。

因此改觀測keydown事件並施以showStatus函式之術，並觀測change事件並施以hideStatus函式之術。

textarea.addEventListener("keydown", showStatus);
textarea.addEventListener("change", hideStatus);

當鍵石於文字輸入處元素受力時，於文字輸入處下方顯示「正在輸入訊息」之狀態提示，輸入完畢後，鼠輩點按文字輸入處元素以外之處，使文字輸入處元素取消受矚之時，使「正在輸入訊息」之狀態提示消失。

示例處

而單使文字輸入處元素受矚，無更改內容，則不顯示狀態提示。

示例之術式

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

翻譯

元素：element
鼠輩：滑鼠
矚目：focus
鍵石：鍵盤按鍵

相關連結

• change - MDN