Element: beforeinput Ereignis

Syntax

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

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

onbeforeinput = (event) => { }

Ereignistyp

Ein InputEvent. Erbt von UIEvent.

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 (z. B. beim Löschen von Zeichen).

InputEvent.dataTransfer Schreibgeschützt

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

InputEvent.inputType Schreibgeschützt

Gibt den Typ der Änderung für bearbeitbare Inhalte zurück, wie z. B. 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

Funktionserkennung

Die folgende Funktion gibt true zurück, wenn beforeinput und somit getTargetRanges 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 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;
}

Ergebnis

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Verwandtes Ereignis: input