TextEvent

{{APIRef("UI Events")}}{{deprecated_header}}

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.

{{InheritanceDiagram}}

Instance properties

This interface also inherits properties from its parent {{domxref("UIEvent")}}, and indirectly from {{domxref("Event")}}.

• {{domxref("TextEvent.data")}} {{ReadOnlyInline}} {{deprecated_inline}}
  • : Indicates the data associated with the event.

Instance methods

• {{domxref("TextEvent.initTextEvent()")}} {{deprecated_inline}}
  • : Populates the values of this (new) TextEvent with the given parameters.

Events list

The following is a list of all TextEvent events:

• textinput

Examples

Listen for text input events

You can register a listener for text input events using {{DOMxRef("EventTarget.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, 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

<input placeholder="Enter some text" name="name" />

<pre id="log"></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

{{EmbedLiveSample("Simple logger showing input events", "100%", "210px" )}}

Specifications

{{Specifications}}

Browser compatibility

{{Compat}}