GeezerVison is showing developer.mozilla.org — TextEvent - Web APIs | MDN
TextEvent
Deprecated
Avoid using this feature in new projects.
This feature may be a candidate for removal from web standards or browsers.
The TextEvent interface is a legacy UI event interface for reporting changes to text UI elements.
Note:
TextEvent events have been superseded by events such as input, beforeinput, keypress, keyup, and keydown.
This interface also inherits properties from its parent UIEvent, and indirectly from Event.
TextEvent.data Read only -
Indicates the data associated with the event.
The following is a list of all TextEvent events:
You can register a listener for text input events using EventTarget.addEventListener() as follows:
js
element.addEventListener("textInput", (event) => {
// …
});
This example listens for a number of events that are fired on an input, including textInput.
The event type and the event data are logged, allowing you to see where textInput is emitted relative to the other events such as those generated by key presses.
HTML
html
<input placeholder="Enter some text" name="name" />
#log {
height: 140px;
overflow: scroll;
padding: 0.5rem;
border: 1px solid black;
}
JavaScript
const logElement = document.querySelector("#log");
function log(text) {
logElement.innerText = `${logElement.innerText}${text}\n`;
logElement.scrollTop = logElement.scrollHeight;
}
js
const input = document.querySelector("input");
input.addEventListener("keypress", updateValue);
input.addEventListener("keyup", updateValue);
input.addEventListener("keydown", updateValue);
input.addEventListener("input", updateValue);
input.addEventListener("beforeinput", updateValue);
input.addEventListener("textInput", updateValue);
function updateValue(e) {
log(`${e.type}: ${e.data}`);
}
Result