InputEvent: inputType 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.
* Some parts of this feature may have varying levels of support.
The inputType read-only property of the
InputEvent interface returns the type of change made to editable content.
Possible changes include for example inserting, deleting, and formatting text.
Value
A string containing the type of input that was made. There are many
possible values, such as insertText, deleteContentBackward,
insertFromPaste, and formatBold. For a complete list of the
available input types, see the Attributes section of the Input Events Level 2 spec.
Examples
This example logs the inputType for input events on an editable
<div>.
HTML
<p id="log">Input type:</p>
<div contenteditable="true" class="sample-text">
<p>
Some sample text. Try inserting line breaks, or deleting text in different
ways, or pasting different content in.
</p>
<hr />
<ul>
<li>A sample</li>
<li>bulleted</li>
<li>list.</li>
</ul>
<p>Another paragraph.</p>
</div>
CSS
.sample-text {
margin: 20px;
padding: 20px;
border: 2px dashed red;
}
JavaScript
const log = document.getElementById("log");
const editable = document.querySelector("div[contenteditable]");
editable.addEventListener("input", logInputType);
function logInputType(event) {
log.textContent = `Input type: ${event.inputType}`;
}
Result
Try editing the text inside the <div> and see what happens.
Note: See also Masayuki Nakano's InputEvent test suite for a more detailed example.
Specifications
| Specification |
|---|
| UI Events # dom-inputevent-inputtype |
Browser compatibility
Loading…