TextEvent
Deprecated: This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see thecompatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.
TheTextEvent interface is a legacy UI event interface for reporting changes to text UI elements.
Note:TextEvent events have been superseded by events such asinput,beforeinput,keypress,keyup, andkeydown.
Instance properties
This interface also inherits properties from its parentUIEvent, and indirectly fromEvent.
TextEvent.dataRead onlyDeprecatedIndicates the data associated with the event.
Instance methods
TextEvent.initTextEvent()DeprecatedPopulates the values of this (new)
TextEventwith the given parameters.
Events list
The following is a list of allTextEvent events:
textinput
Examples
Listen for text input events
You can register a listener for text input events usingEventTarget.addEventListener() as follows:
element.addEventListener("textInput", (event) => { // …});Simple logger showing input events
This example listens for a number of events that are fired on an input, includingtextInput.The event type and the event data are logged, allowing you to see wheretextInput is emitted relative to the other events such as those generated by key presses.
HTML
<input placeholder="Enter some text" name="name" /><pre></pre>#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;}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
Specifications
| Specification |
|---|
| UI Events # legacy-textevent-events |
Browser compatibility
Loading…