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