Baseline Widely available *
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.
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.
This example logs the inputType
for input events on an editable <div>
.
<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 Browser compatibilityRetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4