Element: beforeinput 事件
DOM 中的 beforeinput 事件會在 <input> 或 <textarea> 元素的值即將被修改時觸發。但與 input 事件不同的是，它不會在 <select> 元素上觸發。該事件也適用於啟用了 contenteditable 的元素，以及在 designMode 開啟時的任何元素。
這使得 Web 應用可以在瀏覽器修改 DOM 樹之前覆蓋文字編輯行為，並提供對輸入事件的更多控制以提高效能。
對於 contenteditable 和 designMode，事件目標是編輯宿主。如果這些屬性應用於多個元素，則編輯宿主是其父元素不是可編輯元素的最近的祖先元素。
語法
在諸如 addEventListener() 之類的方法中使用事件名稱，或設定事件處理程式屬性。
js
addEventListener("beforeinput", (event) => { })
onbeforeinput = (event) => { }
事件型別
一個 InputEvent。繼承自 UIEvent。
事件屬性
此介面繼承自其父介面 UIEvent 和 Event 的屬性。
InputEvent.data只讀-
返回一個包含插入字元的字串。如果更改沒有插入文字（例如，刪除字元），則此字串可能為空。
InputEvent.dataTransfer只讀-
返回一個
DataTransfer物件，其中包含有關新增到可編輯內容或從中移除的富文字或純文字資料的資訊。 InputEvent.inputType只讀-
返回可編輯內容的更改型別，例如，插入、刪除或格式化文字。
InputEvent.isComposing只讀-
返回一個
Boolean值，指示事件是在compositionstart之後和compositionend之前觸發的。
示例
特性檢測
以下函式在支援 beforeinput（從而支援 getTargetRanges）時返回 true。
js
function isBeforeInputEventAvailable() {
return (
window.InputEvent &&
typeof InputEvent.prototype.getTargetRanges === "function"
);
}
簡單日誌
此示例記錄元素當前的值，然後立即用應用於 <input> 元素的新值替換它。
HTML
html
<input placeholder="Enter some text" name="name" />
<p id="values"></p>
JavaScript
js
const input = document.querySelector("input");
const log = document.getElementById("values");
input.addEventListener("beforeinput", updateValue);
function updateValue(e) {
log.textContent = e.target.value;
}
結果
規範
| 規範 |
|---|
| UI 事件 # event-type-beforeinput |
瀏覽器相容性
載入中…
另見
- 相關事件：
input