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.

Vollständige Kompatibilität anzeigen
Mehr erfahren

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

Dadurch können Webanwendungen das Verhalten bei der Textbearbeitung ändern, bevor der Browser den DOM-Baum verändert. Außerdem erhalten sie mehr Kontrolle über Eingabeereignisse, um die Leistung zu verbessern.

Bei contenteditable und designMode ist das Ereignisziel der Bearbeitungshost. Wenn diese Eigenschaften für mehrere Elemente gelten, ist der Bearbeitungshost das nächstgelegene übergeordnete Element, dessen Elternelement nicht bearbeitbar ist.

Hinweis: Nicht jede Änderung durch Benutzer löst beforeinput aus. Außerdem kann das Ereignis ausgelöst werden, ohne abbrechbar zu sein. Dies kann vorkommen, wenn die Änderung durch Autovervollständigung, die Übernahme eines Korrekturvorschlags der Rechtschreibprüfung, automatisches Ausfüllen durch einen Passwortmanager, einen IME oder auf andere Weise erfolgt. Die Einzelheiten unterscheiden sich je nach Browser und Betriebssystem. Um das Bearbeitungsverhalten in allen Fällen zu ändern, muss der Code das Ereignis input verarbeiten und gegebenenfalls Änderungen rückgängig machen, die nicht vom beforeinput-Handler verarbeitet wurden. Siehe die Fehlerberichte 1673558 und 1763669.

Syntax

Verwenden Sie den Ereignisnamen in addEventListener():

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

Alternativ können Sie die Event-Handler-Eigenschaft der Schnittstelle verwenden:

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 durch den neuen Wert ersetzt wird, der auf das <input>-Element angewendet 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;
}