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.
TheinputType read-only property of theInputEvent 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 manypossible values, such asinsertText,deleteContentBackward,insertFromPaste, andformatBold. For a complete list of theavailable input types, see theAttributes section of the Input Events Level 2 spec.
Examples
This example logs theinputType forinput events on an editable<div>.
HTML
<p>Input type:</p><div contenteditable="true"> <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 alsoMasayuki Nakano's InputEvent test suite for a more detailed example.
Specifications
| Specification |
|---|
| UI Events # dom-inputevent-inputtype |