Element: beforeinput-Ereignis

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2021.

Das DOM-beforeinput-Ereignis wird ausgelöst, wenn der Wert eines <input>- oder <textarea>-Elements geändert werden soll. Im Gegensatz zum input-Ereignis wird es jedoch nicht für das <select>-Element ausgelöst. Das Ereignis gilt auch für Elemente mit aktiviertem contenteditable und für jedes Element, wenn designMode eingeschaltet ist.

Dies ermöglicht es Webanwendungen, das Verhalten der Textbearbeitung zu überschreiben, bevor der Browser den DOM-Baum verändert, und bietet mehr Kontrolle über Eingabeereignisse, um die Leistung zu verbessern.

Bei contenteditable und designMode ist das Ziel des Ereignisses der Bearbeitungs-Host. Wenn diese Eigenschaften für mehrere Elemente gelten, ist der Bearbeitungs-Host das nächstgelegene Vorfahrenelement, dessen Elternteil nicht bearbeitbar ist.

Hinweis: Nicht jede Benutzeränderung führt dazu, dass beforeinput ausgelöst wird. Außerdem kann das Ereignis ausgelöst werden, aber nicht abbrechbar sein. Dies kann vorkommen, wenn die Änderung durch Autovervollständigung erfolgt, durch die Annahme einer Korrektur von einem Rechtschreibprüfer, durch Passwortmanager-Autofill, durch IME oder auf andere Weise. Die Details variieren je nach Browser und Betriebssystem. Um das Bearbeitungsverhalten in allen Situationen zu überschreiben, muss der Code das input-Ereignis behandeln und möglicherweise Änderungen rückgängig machen, die nicht vom beforeinput-Handler behandelt wurden. Siehe Fehler 1673558 und 1763669.

Syntax

Verwenden Sie den Ereignisnamen in Methoden wie addEventListener() oder setzen Sie eine Ereignishandler-Eigenschaft.

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

onbeforeinput = (event) => { }

Ereignistyp

Ein InputEvent. Erbt von UIEvent.

Event UIEvent InputEvent

Ereigniseigenschaften

Diese Schnittstelle erbt Eigenschaften von ihren Eltern, UIEvent und Event.

InputEvent.data Schreibgeschützt

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

InputEvent.dataTransfer Schreibgeschützt

Gibt ein DataTransfer-Objekt zurück, das Informationen über Rich-Text- oder Nur-Text-Daten enthält, die zu bearbeitbaren Inhalten hinzugefügt oder von ihnen entfernt werden.

InputEvent.inputType Schreibgeschützt

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

InputEvent.isComposing Schreibgeschützt

Gibt einen Boolean-Wert zurück, der angibt, ob das Ereignis nach compositionstart und vor compositionend ausgelöst wird.

Beispiele

Funktionsprüfung

Die folgende Funktion gibt true zurück, wenn beforeinput und somit getTargetRanges unterstützt werden.

js
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 ersetzt wird, der auf das <input>-Element angewendet wird.

HTML

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

JavaScript

js
const input = document.querySelector("input");
const log = document.getElementById("values");

input.addEventListener("beforeinput", updateValue);

function updateValue(e) {
  log.textContent = e.target.value;
}

Ergebnis

Spezifikationen

Specification
UI Events
# event-type-beforeinput

Browser-Kompatibilität

Siehe auch

  • Verwandtes Ereignis: input