Das DOM-beforeinput-Ereignis wird ausgelöst, wenn der Wert eines<input>- oder<textarea>-Elements geändert werden soll. Im Gegensatz zuminput-Ereignis wird es jedoch nicht beim<select>-Element ausgelöst. Das Ereignis gilt auch für Elemente mit aktiviertercontenteditable-Eigenschaft und für beliebige Elemente, wenndesignMode aktiviert ist.

Dadurch können Web-Apps das Verhalten bei Texteinträgen überschreiben, bevor der Browser den DOM-Baum ändert, und sie bieten mehr Kontrolle über Eingabeereignisse zur Verbesserung der Leistung.

Im Fall voncontenteditable unddesignMode ist das Ereignisziel derEditing Host. Wenn diese Eigenschaften auf mehrere Elemente zutreffen, ist der Editing Host das nächstgelegene Vorelement, dessen Elternteil nicht bearbeitbar ist.

Syntax

Verwenden Sie den Ereignisnamen in Methoden wieaddEventListener() oder legen Sie eine Ereignis-Handler-Eigenschaft fest.

addEventListener("beforeinput", (event) => { })onbeforeinput = (event) => { }

Ereignistyp

EinInputEvent. Erbt vonUIEvent.

Ereigniseigenschaften

Diese Schnittstelle erbt Eigenschaften von ihren Eltern,UIEvent undEvent.

InputEvent.dataSchreibgeschützt

Gibt eine Zeichenfolge mit den eingefügten Zeichen zurück. Dies kann eine leere Zeichenfolge sein, wenn die Änderung keinen Text einfügt (z. B. beim Löschen von Zeichen).

InputEvent.dataTransferSchreibgeschützt

Gibt einDataTransfer-Objekt zurück, das Informationen über richtext- oder plaintext-Daten enthält, die zu bearbeitbaren Inhalten hinzugefügt oder daraus entfernt werden.

InputEvent.inputTypeSchreibgeschützt

Gibt den Typ der Änderung für bearbeitbare Inhalte zurück, wie z. B. Einfügen, Löschen oder Formatieren von Text.

InputEvent.isComposingSchreibgeschützt

Gibt einenBoolean-Wert zurück, der angibt, ob das Ereignis nachcompositionstart und vorcompositionend ausgelöst wird.

Beispiele

Funktionserkennung

Die folgende Funktion gibttrue zurück, wennbeforeinput und somitgetTargetRanges unterstützt wird.

function isBeforeInputEventAvailable() {  return (    window.InputEvent &&    typeof InputEvent.prototype.getTargetRanges === "function"  );}

Einfacher Logger

Dieses Beispiel protokolliert den aktuellen Wert des Elements, unmittelbar bevor dieser Wert durch den neuen Wert ersetzt wird, der auf das<input>-Element angewendet wird.

HTML

<input placeholder="Enter some text" name="name" /><p></p>

JavaScript

const input = document.querySelector("input");const log = document.getElementById("values");input.addEventListener("beforeinput", updateValue);function updateValue(e) {  log.textContent = e.target.value;}

Ergebnis

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Verwandtes Ereignis:input