InputEvent: Eigenschaft inputType

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.

Die schreibgeschützte Eigenschaft inputType des InputEvent-Interfaces gibt den Typ der Änderung zurück, die an bearbeitbarem Inhalt vorgenommen wurde. Mögliche Änderungen umfassen beispielsweise das Einfügen, Löschen und Formatieren von Text.

Wert

Ein String, der den Typ der vorgenommenen Eingabe enthält. Es gibt viele mögliche Werte, wie insertText, deleteContentBackward, insertFromPaste und formatBold. Für eine vollständige Liste der verfügbaren Eingabetypen siehe den Abschnitt "Attributes" der Input Events Level 2 Spezifikation.

Beispiele

Dieses Beispiel protokolliert den inputType für input events auf einem bearbeitbaren <div>.

HTML

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

css
.sample-text {
  margin: 20px;
  padding: 20px;
  border: 2px dashed red;
}

JavaScript

js
const log = document.getElementById("log");
const editable = document.querySelector("div[contenteditable]");
editable.addEventListener("input", logInputType);

function logInputType(event) {
  log.textContent = `Input type: ${event.inputType}`;
}

Ergebnis

Versuchen Sie, den Text im <div> zu bearbeiten und sehen Sie, was passiert.

Hinweis: Siehe auch Masayuki Nakanos InputEvent-Test-Suite für ein detaillierteres Beispiel.

Spezifikationen

Specification
UI Events
# dom-inputevent-inputtype

Browser-Kompatibilität