Element: beforeinput Ereignis

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

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

onbeforeinput = (event) => {};

Ein InputEvent. Erbt von UIEvent.

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

InputEvent.data Schreibgeschützt

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 Schreibgeschützt

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 Schreibgeschützt

Gibt den Typ der Änderung für bearbeitbaren Inhalt zurück, wie zum Beispiel 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.

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

function isBeforeInputEventAvailable() {
  return (
    window.InputEvent &&
    typeof InputEvent.prototype.getTargetRanges === "function"
  );
}

Dieses Beispiel protokolliert den aktuellen Wert des Elements, unmittelbar bevor dieser Wert mit dem neuen, auf das <input>-Element angewandten, ersetzt 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

• Verwandtes Ereignis: input