InputEvent: data property
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.
The data read-only property of the
InputEvent interface returns a string with inserted
characters. This may be an empty string if the change doesn't insert text, such as when
characters are deleted.
Value
A string or null. The spec has an overview of its value in various cases.
Examples
In the following example, an event listener receives the input event. Any textual change
to the <input> element is retrieved by InputEvent.data and
inserted into a paragraph using the
Node.textContent
property.
html
<p>Some text to copy and paste.</p>
<input type="text" />
<p class="result"></p>
js
const editable = document.querySelector("input");
const result = document.querySelector(".result");
editable.addEventListener("input", (e) => {
result.textContent = `Inputted text: ${e.data}`;
});
Specifications
| Specification |
|---|
| Input Events Level 2 # dfn-data |
Browser compatibility
Loading…