Element: beforeinput Ereignis

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 beim <select>-Element ausgelöst. Das Ereignis gilt auch für Elemente, bei denen contenteditable aktiviert ist, und für jedes Element, wenn designMode eingeschaltet ist.

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

Im Fall von contenteditable und designMode ist das Ereignisziel der Bearbeitungs-Host. Wenn diese Eigenschaften auf mehrere Elemente angewandt werden, ist der Bearbeitungs-Host das nächste übergeordnete Element, 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, ohne dass es abgebrochen werden kann. Dies kann passieren, wenn die Änderung durch Autovervollständigung, durch Annahme einer Korrektur eines Rechtschreibprüfers, durch Autofill eines Passwort-Managers, durch IME oder auf andere Weise vorgenommen wird. 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 alle Änderungen rückgängig machen, die nicht durch den beforeinput-Handler verarbeitet wurden. Siehe Fehler 1673558 und 1763669.

Syntax

Verwenden Sie den Ereignisnamen in Methoden wie addEventListener() oder legen Sie eine Ereignishandlereigenschaft fest.

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 Nur lesbar

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

InputEvent.dataTransfer Nur lesbar

Gibt ein DataTransfer-Objekt zurück, das Informationen über Richtext- oder Nur-Text-Daten enthält, die zu bearbeitbarem Inhalt hinzugefügt oder entfernt werden.

InputEvent.inputType Nur lesbar

Gibt den Typ der Änderung für bearbeitbaren Inhalt zurück, wie zum Beispiel Einfügen, Löschen oder Formatieren von Text.

InputEvent.isComposing Nur lesbar

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

Beispiele

Merkmalserkennung

Die folgende Funktion gibt true zurück, wenn beforeinput und damit 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 mit dem neuen, auf das <input>-Element angewandten, ersetzt 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

BCD tables only load in the browser

Siehe auch

  • Verwandtes Ereignis: input