InputEvent: inputType-Eigenschaft

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.

Die schreibgeschützte inputType-Eigenschaft der InputEvent-Schnittstelle gibt den Typ der Änderung zurück, die an bearbeitbaren Inhalten 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. Eine vollständige Liste der verfügbaren Eingabetypen finden Sie im Attributes-Abschnitt der Input Events Level 2 Spezifikation.

Beispiele

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

HTML

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

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 innerhalb des <div> zu bearbeiten und beobachten 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

BCD tables only load in the browser