Element: input 事件
當用戶直接操作 <input>、<select> 或 <textarea> 元素的 value 導致其改變時，會觸發 input 事件（例如，在文字框中輸入或選中複選框）。
當啟用 contenteditable 屬性的元素，或在 designMode 開啟的任何元素上，也會應用此事件。對於 contenteditable 和 designMode，事件目標是編輯宿主。如果這些屬性應用於多個元素，編輯宿主將是其父元素未被編輯的最近的祖先元素。
對於 type=checkbox 或 type=radio 的 <input> 元素，根據 HTML Living Standard 規範，當用戶切換控制元件時，應該會觸發 input 事件。然而，歷史上這種情況並非總是如此。請檢查相容性，或者對於這些型別的元素，考慮使用 change 事件。
對於接受文字輸入的 <textarea> 和 <input> 元素（如 type=text、type=tel 等），介面是 InputEvent；對於其他元素，介面是 Event。
每當元素的 value 改變時，都會觸發 input 事件。這與 change 事件不同，後者僅在值已提交時觸發，例如透過按下回車鍵或從選項列表中選擇值。請注意，當 JavaScript 以程式設計方式更改元素的 value 時，不會觸發 input 事件。
語法
在諸如 addEventListener() 之類的方法中使用事件名稱，或設定事件處理程式屬性。
addEventListener("input", (event) => { })
oninput = (event) => { }
事件型別
一個 InputEvent。繼承自 UIEvent。
事件屬性
此介面繼承自其父介面 UIEvent 和 Event 的屬性。
InputEvent.data只讀-
返回一個包含插入字元的字串。如果更改沒有插入文字（例如，刪除字元），則此字串可能為空。
InputEvent.dataTransfer只讀-
返回一個
DataTransfer物件，其中包含有關新增到可編輯內容或從中移除的富文字或純文字資料的資訊。 InputEvent.inputType只讀-
返回可編輯內容的更改型別，例如，插入、刪除或格式化文字。
InputEvent.isComposing只讀-
返回一個
Boolean值，指示事件是在compositionstart之後和compositionend之前觸發的。
示例
此示例會在您更改 <input> 元素的值時記錄該值。
HTML
<input placeholder="Enter some text" name="name" />
<p id="values"></p>
JavaScript
const input = document.querySelector("input");
const log = document.getElementById("values");
input.addEventListener("input", updateValue);
function updateValue(e) {
log.textContent = e.target.value;
}
結果
規範
| 規範 |
|---|
| UI 事件 # event-type-input |
| HTML # handler-oninput |
瀏覽器相容性
載入中…
另見
- 相關事件