Element：beforeinput 事件

DOM 事件 beforeinput 在<input>, <select> 或 <textarea> 的值即将被修改前触发。这个事件也可以在 contenteditable 被设置为 true 的元素和打开 designMode 后的任何元素上被触发。

In the case of contenteditable and designMode, the event target is the editing host. If these properties apply to multiple elements, the editing host is the nearest ancestor element whose parent isn't editable.

Bubbles	Yes
Cancelable	Yes
Interface	InputEvent
Event handler property	None
Sync / Async	Sync
Composed	Yes
Default Action	Update the DOM element

<input placeholder="Enter some text" name="name" />
<p id="values"></p>

const input = document.querySelector("input");
const log = document.getElementById("values");

input.addEventListener("beforeinput", updateValue);

function updateValue(e) {
  log.textContent = e.target.value;
}