Signatur
Beschreibung
Die schreibgeschützte Eigenschaft selectionEnd des TextUpdateEvent-Interface gibt eine Zahl zurück. Sie steht für den Offset, an dem die Auswahl im Textinhalt des EditContext endet, nachdem die Aktualisierung übernommen wurde. Ohne markierten Bereich hat sie denselben Wert wie selectionStart und bezeichnet damit die Cursorposition.
Das textupdate-Ereignis wird ausgelöst, wenn Nutzer oder ein Eingabemethoden-Editor (IME) Text in einem Element eingeben, das über element.editContext mit einem EditContext verbunden ist. Mit der EditContext-API übernimmt die Anwendung das Rendern selbst, deshalb muss sie auch die Auswahl selbst nachführen. Dazu übergibt man selectionStart und selectionEnd in der Regel an EditContext.updateSelection() und zeichnet Cursor bzw. Markierung anschließend neu.
Die Offsets zählen UTF-16-Codeeinheiten im Wert von EditContext.text, genau wie Indizes in JavaScript-Strings. Das Auswahlende gibt es nur einmal. Die Eigenschaft beschreibt nicht, welcher Bereich ersetzt wurde. Dafür sind updateRangeStart und updateRangeEnd zuständig.
Rückgabewert
EditContext, nachdem die Aktualisierung angewendet wurde.Beispiele
Cursorposition nach einer Eingabe ausgeben
const editor = document.querySelector('#editor');
const editContext = new EditContext();
editor.editContext = editContext;
editContext.addEventListener('textupdate', (event) => {
console.log(`Eingefügt: "${event.text}"`);
console.log(`Auswahl: ${event.selectionStart} bis ${event.selectionEnd}`);
});Auswahl nachführen und eigenes Rendering aktualisieren
const editor = document.querySelector('#editor');
const editContext = new EditContext({ text: '' });
editor.editContext = editContext;
const render = () => {
const { text, selectionStart, selectionEnd } = editContext;
const vor = text.slice(0, selectionStart);
const markiert = text.slice(selectionStart, selectionEnd);
const nach = text.slice(selectionEnd);
editor.replaceChildren(
document.createTextNode(vor),
Object.assign(document.createElement('mark'), { textContent: markiert || '\u200B' }),
document.createTextNode(nach)
);
};
editContext.addEventListener('textupdate', (event) => {
// Auswahl im EditContext übernehmen, danach neu zeichnen
editContext.updateSelection(event.selectionStart, event.selectionEnd);
render();
});Feature-Erkennung mit Fallback
if ('EditContext' in window) {
const ctx = new EditContext();
document.querySelector('#editor').editContext = ctx;
ctx.ontextupdate = ({ selectionEnd }) => {
console.log('Cursor steht bei', selectionEnd);
};
} else {
// Fallback: gewöhnliches contenteditable bzw. <textarea>
console.warn('EditContext wird nicht unterstützt.');
}// Wichtig · Fallstricke
- Kompatibilität: Die EditContext-API ist experimentell. Sie ist bisher nur in Chromium-basierten Browsern (ab Version 121) verfügbar, nicht in Firefox und Safari. Deshalb immer per
'EditContext' in windowprüfen, ob sie vorhanden ist. selectionEndbeschreibt den Zustand nach der Aktualisierung. Den ersetzten BereichupdateRangeStart/updateRangeEndnicht mit der neuen Auswahl verwechseln.- Offsets zählen UTF-16-Codeeinheiten. Emojis und andere Zeichen außerhalb der BMP belegen zwei Einheiten. Bei der Umrechnung in Grapheme (z. B. mit
Intl.Segmenter) ist Vorsicht geboten. - Die Eigenschaft ist schreibgeschützt. Wer sie zuweist, ändert nichts. Um die Auswahl zu ändern,
EditContext.updateSelection()aufrufen. - Die Rückwärtsrichtung einer Auswahl wird im Event nicht als eigenes Merkmal gemeldet. Ob
selectionStart > selectionEndauftreten kann, hängt von der Implementierung ab. Beim Aufschneiden von Strings besserMath.min/Math.maxverwenden.