Signatur
Beschreibung
Die schreibgeschützte Eigenschaft selectionStart des TextUpdateEvent gibt an, an welcher Stelle die Auswahl (oder der Cursor) im Textinhalt des bearbeitbaren Bereichs nach der Textänderung beginnt. Der bearbeitbare Bereich ist mit einem EditContext-Objekt verknüpft.
Das Ereignis textupdate wird ausgelöst, wenn der Benutzer tippt oder eine Eingabemethode (IME) Text einfügt. Mit der EditContext-API übernimmt deine Anwendung selbst das Darstellen von Text und Cursor, z. B. in einem <canvas>-basierten Editor. Deshalb musst du nach jedem Update die neue Cursorposition aus selectionStart und selectionEnd auslesen und in deinem eigenen Zustand übernehmen.
Der Wert ist ein Offset in UTF-16-Codeeinheiten, gezählt ab dem Anfang von editContext.text. Sind selectionStart und selectionEnd gleich, gibt es keine Auswahl, sondern nur einen einfachen Cursor. Nach normaler Texteingabe trifft das meistens zu.
Rückgabewert
EditContext, gültig nach dem Update.Beispiele
Cursorposition nach Eingabe ausgeben
const editor = document.getElementById('editor');
const editContext = new EditContext();
editor.editContext = editContext;
editContext.addEventListener('textupdate', (event) => {
console.log(`Eingefügt: "${event.text}"`);
console.log(`Auswahl: ${event.selectionStart}–${event.selectionEnd}`);
});Eigenen Editor-Zustand aktualisieren und rendern
const canvas = document.querySelector('canvas');
const ctx2d = canvas.getContext('2d');
const editContext = new EditContext();
canvas.editContext = editContext;
const state = { text: '', selStart: 0, selEnd: 0 };
const render = () => {
ctx2d.clearRect(0, 0, canvas.width, canvas.height);
ctx2d.font = '16px sans-serif';
ctx2d.fillText(state.text, 10, 30);
// Cursor an selStart zeichnen
const x = 10 + ctx2d.measureText(state.text.slice(0, state.selStart)).width;
ctx2d.fillRect(x, 14, 1, 20);
};
editContext.addEventListener('textupdate', (e) => {
state.text = editContext.text;
state.selStart = e.selectionStart;
state.selEnd = e.selectionEnd;
render();
});Feature-Erkennung und Unterscheidung Cursor/Auswahl
if ('EditContext' in window) {
const el = document.querySelector('#editor');
el.editContext = new EditContext({ text: 'Hallo' });
el.editContext.addEventListener('textupdate', ({ selectionStart, selectionEnd }) => {
const collapsed = selectionStart === selectionEnd;
console.log(collapsed ? `Cursor bei ${selectionStart}` : 'Auswahl aktiv');
});
} else {
console.warn('EditContext wird nicht unterstützt – Fallback auf contenteditable.');
}// Wichtig · Fallstricke
- Experimentell: Die EditContext-API gibt es bisher nur in Chromium-Browsern (Chrome/Edge ab 121). Prüfe vorher mit
'EditContext' in window, ob sie verfügbar ist. - Nicht verwechseln mit
updateRangeStart. Diese Eigenschaft gibt an, ab welcher Stelle Text ersetzt wurde.selectionStartist dagegen die Cursorposition nach dem Update. - Der Offset zählt UTF-16-Codeeinheiten. Emojis und andere Zeichen außerhalb der BMP belegen zwei Einheiten. Rechne diese Werte also nicht direkt in Graphem-Indizes um.
- Die Eigenschaft ist schreibgeschützt. Die Auswahl änderst du mit
EditContext.updateSelection(). - Den Text liest du aus
editContext.textaus, denn das DOM-Element wird nicht automatisch aktualisiert.