Element: beforeinput-Ereignis

Baseline Weitgehend verfügbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit März 2021 browserübergreifend verfügbar.

Mehr erfahren
Vollständige Kompatibilität anzeigen

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

Dies ermöglicht Web-Apps, das Verhalten der Texteingabe zu überschreiben, bevor der Browser den DOM-Baum verändert, und bietet mehr Kontrolle über Eingabeereignisse zur Leistungsverbesserung.

Im Fall von contenteditable und designMode ist das Ereignisziel der Editing Host. Wenn diese Eigenschaften auf mehrere Elemente angewendet werden, ist der Editing Host das nächstgelegene Vorfahren-Element, dessen übergeordnetes Element 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 abgebrochen werden können. Dies kann geschehen, wenn die Änderung durch Autovervollständigung erfolgt, durch das Akzeptieren einer Korrektur aus einer Rechtschreibprüfung, durch automatisches Ausfüllen durch einen Passwort-Manager, 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 durch den beforeinput-Handler behandelt wurden. Siehe die Fehler 1673558 und 1763669.

Syntax

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

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

onbeforeinput = (event) => { }

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

HTML

html

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

JavaScript

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

input.addEventListener("beforeinput", updateValue);

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