Signatur
Beschreibung
Mit new InputEvent() erzeugst du synthetische Eingabe-Events, wie sie der Browser sonst bei Änderungen an <input>, <textarea> oder Elementen mit contenteditable auslöst. Typische Event-Typen sind "input" und "beforeinput".
Zum Einsatz kommt der Konstruktor vor allem in Tests, beim programmatischen Befüllen von Formularen, wenn Frameworks (React, Vue, Angular) die Änderung mitbekommen sollen, und in eigenen Editor-Komponenten, die Eingaben weiterreichen. Das Objekt wird danach mit element.dispatchEvent() ausgelöst.
Wichtig: Ein synthetisches Event ändert den Inhalt nicht selbst. Es informiert nur die Listener. Wenn der Wert tatsächlich geändert werden soll, musst du ihn vorher selbst setzen (z. B. über element.value). Außerdem ist bei so erzeugten Events isTrusted immer false.
Parameter
| Name | Typ | Default | Beschreibung |
|---|---|---|---|
| $type Pflicht | string | Name des Events, z. B. "input" oder "beforeinput". Groß-/Kleinschreibung wird beachtet. |
|
| $options | InputEventInit | {} | Optionales Objekt. Neben den Feldern aus UIEventInit/EventInit (bubbles, cancelable, composed, view, detail) gibt es:
|
Rückgabewert
InputEvent-Objekt, das mit dispatchEvent() ausgelöst werden kann.Beispiele
Einfaches input-Event erzeugen und auslesen
const event = new InputEvent('input', {
inputType: 'insertText',
data: 'a',
bubbles: true
});
console.log(event.type, event.inputType, event.data, event.isTrusted);Formularfeld programmatisch befüllen und Listener informieren
const field = document.querySelector('#email');
field.addEventListener('input', (e) => {
console.log(`Neuer Wert: ${e.target.value} (${e.inputType})`);
});
// Erst den Wert setzen, dann das Event auslösen
field.value = 'max@example.com';
field.dispatchEvent(new InputEvent('input', {
bubbles: true,
inputType: 'insertReplacementText',
data: 'max@example.com'
}));Abbrechbares beforeinput in einer Editor-Komponente
const editor = document.querySelector('[contenteditable]');
editor.addEventListener('beforeinput', (e) => {
// Keine Ziffern zulassen
if (e.inputType === 'insertText' && /\d/.test(e.data ?? '')) {
e.preventDefault();
}
});
const ev = new InputEvent('beforeinput', {
inputType: 'insertText',
data: '5',
bubbles: true,
cancelable: true
});
const notCanceled = editor.dispatchEvent(ev);
console.log('Durchgelassen:', notCanceled);// Wichtig · Fallstricke
- Kein echter Inhalt: Ein synthetisches
InputEventfügt keinen Text ein und löscht auch keinen. Den Inhalt musst du selbst ändern. - Standardwerte:
bubblesundcancelablesind standardmäßigfalse. Delegierte Listener (z. B. in Frameworks) sehen das Event nur, wenn dububbles: truesetzt. - React & Co.: React verfolgt Werte intern. Ein direktes
el.value = …wird eventuell ignoriert. Setze den Wert dann über den nativen Setter (Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value').set.call(el, v)) und löse danach das Event aus. - isTrusted: ist immer
false. Browser-Funktionen, die eine echte Nutzeraktion voraussetzen, lassen sich damit nicht auslösen. - Kompatibilität: Der Konstruktor wird in allen modernen Browsern unterstützt.
dataTransfer,targetRangesundgetTargetRanges()sind ältere bzw. weniger einheitlich umgesetzte Teile der Spezifikation. Der Internet Explorer kennt den Konstruktor nicht; dort braucht es als Auswegnew Event('input').