InputEvent.inputType — Eigenschaft · JavaScript-Referenz

Signatur

InputEvent.inputType

Beschreibung

Die Eigenschaft inputType eines InputEvent beschreibt, wie sich der Inhalt eines <input>, <textarea> oder eines Elements mit contenteditable ändert. Typische Werte sind "insertText" (normale Eingabe), "insertLineBreak", "insertParagraph", "insertFromPaste", "insertFromDrop", "deleteContentBackward" (Rücktaste), "deleteContentForward" (Entf), "deleteByCut", "historyUndo", "historyRedo", "insertCompositionText" (IME-Eingabe) sowie Formatierungstypen wie "formatBold" oder "formatItalic".

So lässt sich unterscheiden, ob Text getippt, eingefügt, gelöscht oder per Rückgängig wiederhergestellt wurde. Das ist nützlich für eigene Rich-Text-Editoren, eigene Undo-Stacks, Eingabevalidierung (z. B. nur Einfügen säubern) oder Statistiken zum Nutzerverhalten.

Besonders wirkungsvoll ist die Kombination mit dem Ereignis beforeinput: Dort kann man mit event.preventDefault() bestimmte Änderungstypen blockieren, bevor sie den DOM verändern, und über getTargetRanges() den betroffenen Bereich ermitteln. Beim input-Ereignis ist die Änderung bereits erfolgt und kann nicht mehr verhindert werden.

Rückgabewert

Typ

string

Beschreibung

Ein Bezeichner des Änderungstyps gemäß der Spezifikation Input Events Level 2, z. B. "insertText" oder "deleteContentBackward". Kann eine leere Zeichenkette sein, wenn das Ereignis synthetisch ohne inputType erzeugt wurde.

Beispiele

Art der Änderung protokollieren

const textarea = document.querySelector('#notiz');

textarea.addEventListener('input', (event) => {
  console.log(`Typ: ${event.inputType}, Daten: ${event.data}`);
});

Typ: insertText, Daten: a Typ: deleteContentBackward, Daten: null Typ: insertFromPaste, Daten: null

Einfügen und Ablegen in beforeinput blockieren

const feld = document.querySelector('#pin');
const gesperrt = new Set(['insertFromPaste', 'insertFromDrop']);

feld.addEventListener('beforeinput', (event) => {
  if (gesperrt.has(event.inputType)) {
    event.preventDefault();
    console.warn('Bitte die PIN manuell eintippen.');
  }
});

Bitte die PIN manuell eintippen.

Eigene Formatierung in contenteditable

const editor = document.querySelector('[contenteditable]');

editor.addEventListener('beforeinput', (event) => {
  switch (event.inputType) {
    case 'formatBold':
      event.preventDefault();
      // eigene Logik statt <b> des Browsers
      console.log('Fett-Formatierung selbst umsetzen');
      break;
    case 'historyUndo':
      event.preventDefault();
      console.log('Eigenen Undo-Stack verwenden');
      break;
  }
});

Fett-Formatierung selbst umsetzen

Synthetisches InputEvent mit inputType

const ev = new InputEvent('input', {
  inputType: 'insertText',
  data: 'Hallo',
  bubbles: true
});
console.log(ev.inputType);
document.querySelector('input').dispatchEvent(ev);

insertText

// Wichtig · Fallstricke

Die Eigenschaft ist schreibgeschützt; setzen lässt sie sich nur über das Options-Objekt des Konstruktors new InputEvent(). Synthetische Ereignisse verändern den Inhalt nicht.
Nicht alle Typen sind beim beforeinput-Ereignis abbrechbar. Das betrifft vor allem "insertCompositionText" während einer IME-Komposition, z. B. bei Eingaben auf Chinesisch oder Japanisch oder mit der Autokorrektur auf Mobilgeräten.
Browser unterscheiden sich im Detail. "insertLineBreak" und "insertParagraph" werden je nach Browser und Element unterschiedlich gemeldet, und Formatierungstypen treten meist nur in contenteditable auf. Man sollte immer einen default-Zweig vorsehen.
Bei manchen Typen (Einfügen, Löschen) ist event.data gleich null. Für eingefügte Inhalte verwendet man stattdessen event.dataTransfer.
Browser-Unterstützung: Chrome/Edge 60+, Safari 10.1+, Firefox 66+. beforeinput gibt es in Firefox erst ab Version 87.
Das Ereignis change und Tastatur-Ereignisse wie keydown haben kein inputType. Zum Erkennen von Einfügen, Undo usw. ist inputType zuverlässiger als die Auswertung von Tasten.

Siehe auch

InputEvent.data InputEvent.dataTransfer InputEvent.isComposing Event.type HTMLElement.inputMode