Signatur
Beschreibung
Die Eigenschaft selectionStart eines EditContext gibt an, an welcher Stelle im bearbeitbaren Text (EditContext.text) die aktuelle Auswahl beginnt. Der Wert ist ein Versatz in UTF-16-Codeeinheiten, gezählt ab dem Textanfang (0). Wenn selectionStart und selectionEnd gleich sind, ist nichts markiert und der Wert gibt die Position der Einfügemarke (Caret) an.
Die EditContext-API trennt die Texteingabe vom DOM: Der Browser und das Betriebssystem (Tastatur, IME, Bildschirmtastatur) arbeiten mit einem internen Textmodell. Die Darstellung übernimmt Ihr eigener Code, etwa ein Canvas oder ein selbst gebautes DOM. Damit IME-Kandidatenfenster und Texteingaben an der richtigen Stelle ankommen, muss der EditContext immer wissen, wo die Auswahl gerade liegt. selectionStart gibt diesen Zustand wieder.
Die Eigenschaft ist schreibgeschützt. Ändern lässt sich die Auswahl nur mit EditContext.updateSelection(start, end), zum Beispiel wenn der Nutzer mit Maus oder Pfeiltasten die Auswahl in Ihrem eigenen Editor verschiebt. Bei Texteingaben aktualisiert der Browser den Wert selbst. Das Ereignis textupdate liefert die neue Auswahl außerdem in event.selectionStart und event.selectionEnd mit.
Rückgabewert
EditContext.text, an dem die Auswahl beginnt. Ist er gleich selectionEnd, ist nichts markiert und der Wert entspricht der Caret-Position.Beispiele
EditContext anlegen und Auswahlbeginn lesen
const editor = document.querySelector('#editor');
// EditContext mit Starttext und Auswahl erzeugen
const editContext = new EditContext({
text: 'Hallo Welt',
selectionStart: 6,
selectionEnd: 10
});
editor.editContext = editContext;
console.log(editContext.selectionStart); // 6
console.log(editContext.selectionEnd); // 10
console.log(
editContext.text.slice(editContext.selectionStart, editContext.selectionEnd)
);Nach Texteingabe neu rendern (textupdate)
const canvas = document.querySelector('canvas');
const editContext = new EditContext();
canvas.editContext = editContext;
const render = () => {
const { text, selectionStart, selectionEnd } = editContext;
const vorher = text.slice(0, selectionStart);
const markiert = text.slice(selectionStart, selectionEnd);
const nachher = text.slice(selectionEnd);
// Hier würde auf das Canvas gezeichnet – vereinfacht als Log:
console.log(`${vorher}[${markiert}|]${nachher}`);
};
editContext.addEventListener('textupdate', (event) => {
// Nach der Eingabe liegt die Auswahl bereits aktualisiert vor
console.log('Caret bei', event.selectionStart, '=', editContext.selectionStart);
render();
});
canvas.focus();Caret mit Pfeiltasten verschieben
const editor = document.querySelector('#editor');
const editContext = new EditContext({ text: 'Beispieltext' });
editor.editContext = editContext;
editor.addEventListener('keydown', (event) => {
const { selectionStart, selectionEnd, text } = editContext;
// Richtung beachten: Werte normalisieren
const start = Math.min(selectionStart, selectionEnd);
const end = Math.max(selectionStart, selectionEnd);
if (event.key === 'ArrowLeft') {
const pos = start === end ? Math.max(0, start - 1) : start;
editContext.updateSelection(pos, pos);
event.preventDefault();
} else if (event.key === 'ArrowRight') {
const pos = start === end ? Math.min(text.length, end + 1) : end;
editContext.updateSelection(pos, pos);
event.preventDefault();
}
console.log('Caret jetzt bei', editContext.selectionStart);
});// Wichtig · Fallstricke
- Browser-Unterstützung: Die EditContext-API gibt es bisher nur in Chromium-Browsern (ab Version 121). Prüfen Sie vorher mit
'EditContext' in window, ob sie verfügbar ist, und sehen Sie eine Alternative vor, etwacontenteditableoder<textarea>. - Schreibgeschützt: Eine Zuweisung wie
editContext.selectionStart = 3wirkt nicht. Verwenden SieupdateSelection(start, end). - UTF-16-Einheiten: Der Versatz zählt Codeeinheiten, keine sichtbaren Zeichen. Emojis oder Zeichen außerhalb der BMP belegen zwei Einheiten, Graphem-Cluster sogar mehr. Die Caret-Logik sollte deshalb nie mitten in ein Surrogatpaar springen (z. B. mit
Intl.Segmenterarbeiten). - Richtung der Auswahl: Setzt Ihr Code mit
updateSelectioneinen Start, der größer als das Ende ist, bleibt diese Reihenfolge erhalten, undselectionStartkann größer alsselectionEndsein. Werte vor dem Zuschneiden mitMath.min/Math.maxnormalisieren. - Synchron halten: Wenn Ihre eigene Darstellung die Auswahl ändert (Mausklick, Tastenkürzel), müssen Sie
updateSelectionaufrufen, sonst stimmen IME-Komposition und Einfügeposition nicht mehr überein. AuchupdateSelectionBounds()sollte aktualisiert werden, damit das IME-Fenster richtig positioniert wird.