TextUpdateEvent.updateRangeEnd — Eigenschaft · JavaScript-Referenz

Signatur

TextUpdateEvent.updateRangeEnd

Beschreibung

Die Eigenschaft updateRangeEnd des TextUpdateEvent gibt an, wo der zu ersetzende Textbereich endet. Das Event wird auf einem EditContext ausgelöst, sobald der Benutzer tippt, einfügt, löscht oder eine IME-Komposition (z. B. bei japanischer oder chinesischer Eingabe) den Text verändert.

Zusammen mit updateRangeStart beschreibt sie den halboffenen Bereich [updateRangeStart, updateRangeEnd) im bisherigen Text. Dieser Bereich soll durch den Inhalt von event.text ersetzt werden. Sind Start und Ende gleich, handelt es sich um eine reine Einfügung. Ist text leer, wird nur gelöscht.

Wichtig: Der EditContext hat seinen internen Text beim Auslösen des Events bereits aktualisiert. Die Aufgabe deines Codes ist es, das eigene Modell und die Darstellung (z. B. Canvas oder eigenes DOM) passend nachzuziehen. Genau dafür brauchst du updateRangeEnd, typischerweise zusammen mit String.prototype.slice().

Rückgabewert

Typ

number

Beschreibung

Nicht-negative Ganzzahl: exklusiver Endoffset des ersetzten Bereichs im Text vor der Änderung, gezählt in UTF-16-Codeeinheiten.

Beispiele

Ersetzten Bereich protokollieren

const editor = document.querySelector('#editor');
const editContext = new EditContext();
editor.editContext = editContext;

editContext.addEventListener('textupdate', (event) => {
  console.log(
    `Ersetze [${event.updateRangeStart}, ${event.updateRangeEnd}) durch "${event.text}"`
  );
});

Ersetze [0, 0) durch "H" Ersetze [1, 1) durch "i"

Eigenes Textmodell synchron halten

let model = '';
const editor = document.querySelector('#editor');
const editContext = new EditContext();
editor.editContext = editContext;

editContext.addEventListener('textupdate', (event) => {
  const { updateRangeStart: start, updateRangeEnd: end, text } = event;
  // Bereich [start, end) durch den neuen Text ersetzen
  model = model.slice(0, start) + text + model.slice(end);
  editor.textContent = model;
  console.log(model);
});

Hallo

Einfügen, Ersetzen und Löschen unterscheiden

const editContext = new EditContext({ text: 'Hallo Welt' });
document.querySelector('#editor').editContext = editContext;

editContext.addEventListener('textupdate', (event) => {
  const length = event.updateRangeEnd - event.updateRangeStart;
  if (length === 0) {
    console.log('Einfügung:', event.text);
  } else if (event.text === '') {
    console.log(`Löschung von ${length} Zeichen`);
  } else {
    console.log(`Ersetzung von ${length} Zeichen durch "${event.text}"`);
  }
});

Löschung von 1 Zeichen

// Wichtig · Fallstricke

Exklusives Ende: Das Zeichen an Position updateRangeEnd gehört nicht mehr zum ersetzten Bereich. Deshalb passt die Eigenschaft direkt zu slice(end).
UTF-16-Offsets: Emojis und andere Zeichen außerhalb der BMP belegen zwei Codeeinheiten. Wer mit Graphem- oder Codepoint-Indizes rechnet (z. B. über Intl.Segmenter oder Array.from()), bekommt falsche Positionen.
Bezugspunkt ist der alte Text: Die Offsets beziehen sich auf den Text vor der Änderung. Wer mehrere Updates zwischenspeichert und verzögert anwendet, muss die Positionen selbst verschieben.
Die Auswahl wird nicht automatisch angepasst: Nutze selectionStart/selectionEnd des Events, um den Cursor in der eigenen Darstellung zu setzen.
Kompatibilität: Die EditContext API ist experimentell und bisher nur in Chromium-Browsern verfügbar (ab Version 121). Prüfe die Unterstützung mit 'EditContext' in window und sieh eine Ersatzlösung vor, z. B. contenteditable oder <textarea>.

Siehe auch

PerformanceTiming.unloadEventEnd TextUpdateEvent.updateRangeStart TextUpdateEvent.selectionEnd TextUpdateEvent.text TextUpdateEvent.selectionStart