InputEvent.inputType
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 DOMString
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 1 spec.
Examples
This example logs the inputType
for input events on an editable
<div>
.
HTML
<p id="log">Input type: </p>
<div contenteditable="true" style="margin: 20px;padding: 20px;border:2px dashed red;">
<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>
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
BCD tables only load in the browser