圖片來源：自然主意。酷覓星
擅於傾聽算是一種輸入嗎？

前篇閱畢仍有疑惑，是否有更合適之事件可觀測輸入有關之元素之變化？故本篇紀錄其他與輸入有關之不可思議事件：input與beforeinput事件。

事件其廿九：input

此事件發生於元素之值遭受更改之時，尤其為<input>、<select>及 <textarea> 等元素，抑或是帶有contenteditable屬性之元素。

規範原文：
A user agent MUST dispatch this event immediately after the DOM has been updated.

MDN：
The input event fires when the value of an <input>, <select>, or <textarea> element has been changed as a direct result of a user action (such as typing in a textbox or checking a checkbox). The event also applies to elements with contenteditable enabled...

input事件與change事件不同。input事件會於元素之值遭受更改之當下觸發，然change事件僅於元素之值完成變動之時觸發，例如按壓Enter鍵石或是從清單中擇一選項。

MDN：
The input event is fired every time the value of the element changes. This is unlike the change event, which only fires when the value is committed, such as by pressing the enter key or selecting a value from a list of options.

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

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

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

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

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

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

textarea.addEventListener("input", showStatus);

亦能使鍵石於文字輸入處元素受力時，於文字輸入處下方顯示「正在輸入訊息」之狀態提示。

示例處

與前篇之不同處為，若於文字輸入處元素內僅按壓方向鍵石而無更改文字輸入處元素之值，則不顯示「正在輸入訊息」之狀態提示。

然前篇示例因觀測為keydown事件，因此按壓方向鍵石亦會顯示「正在輸入訊息」之狀態提示。

註：上圖為前篇示例之繪圖

事件其三十：beforeinput

此事件發生於元素之值遭受更改之前一刻，尤其為<input>及 <textarea> 等元素。與input事件不同，beforeinput事件不會於<select>元素觸發。

規範原文：
A user agent MUST dispatch this event when the DOM is about to be updated.

MDN：
The DOM beforeinput event fires when the value of an <input> or <textarea> element is about to be modified. But in contrast to the input event, it does not fire on the <select> element.

以下示例將上述之示例中添一事件觀測器，並於input及beforeinput事件觀測器施以函式之術，使操術板顯示當下觸發之事件。

textarea.addEventListener("input", (event) => {
  console.log(event.type);
  showStatus();
});
textarea.addEventListener("beforeinput", (event) => {
  console.log(event.type);
});
textarea.addEventListener("change", hideStatus);

可見每按壓一鍵石，皆先觸發beforeinput事件而後input事件。

示例處

示例之術式

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

翻譯

元素：element
鍵石：鍵盤按鍵

相關連結

• input - w3.org
• input - MDN
• beforeinput - w3.org
• beforeinput - MDN