Signatur
Beschreibung
selectionStart ist eine lesbare und schreibbare Eigenschaft von HTMLInputElement. Sie enthält den nullbasierten Index des ersten ausgewählten Zeichens im Wert des Feldes. Ist nichts ausgewählt, haben selectionStart und selectionEnd denselben Wert. Dieser Wert ist die aktuelle Position des Cursors (Caret).
Die Eigenschaft wird vor allem für Texteditor-Funktionen gebraucht: Text an der Cursorposition einfügen, Eingabemasken bauen, Autovervollständigung umsetzen oder den Cursor nach einer programmatischen Änderung von value wieder an die richtige Stelle setzen. Wenn du selectionStart setzt, wird die Auswahl ab diesem Index neu festgelegt. Ist der neue Wert größer als selectionEnd, wird selectionEnd auf denselben Wert gesetzt.
Die Eigenschaft funktioniert nur bei Eingabetypen, die Textauswahl unterstützen: text, search, url, tel und password. Bei anderen Typen wie email, number, date oder checkbox gibt der Lesezugriff null zurück, und ein Schreibzugriff löst eine InvalidStateError-DOMException aus. HTMLTextAreaElement hat eine entsprechende Eigenschaft.
Rückgabewert
null, wenn der Eingabetyp keine Auswahl unterstützt.Beispiele
Cursorposition und Auswahl auslesen
const input = document.querySelector('#name');
input.value = 'Hallo Welt';
input.focus();
input.setSelectionRange(6, 10);
const { selectionStart, selectionEnd, value } = input;
console.log(selectionStart, selectionEnd);
console.log(value.slice(selectionStart, selectionEnd));Text an der Cursorposition einfügen
const insertAtCursor = (input, text) => {
const start = input.selectionStart ?? input.value.length;
const end = input.selectionEnd ?? start;
input.value = input.value.slice(0, start) + text + input.value.slice(end);
// Cursor hinter den eingefügten Text setzen
const pos = start + text.length;
input.selectionStart = input.selectionEnd = pos;
input.focus();
};
const field = document.querySelector('#nachricht');
document.querySelector('#emoji').addEventListener('click', () => insertAtCursor(field, '😀'));Cursorposition beim Umformatieren erhalten
const ibanInput = document.querySelector('#iban');
ibanInput.addEventListener('input', () => {
const pos = ibanInput.selectionStart;
const before = ibanInput.value.slice(0, pos).replace(/\s/g, '').length;
const raw = ibanInput.value.replace(/\s/g, '').toUpperCase();
ibanInput.value = raw.replace(/(.{4})/g, '$1 ').trim();
// Neue Position berechnen: Zeichen ohne Leerzeichen zählen
let count = 0, newPos = 0;
while (newPos < ibanInput.value.length && count < before) {
if (ibanInput.value[newPos] !== ' ') count++;
newPos++;
}
ibanInput.setSelectionRange(newPos, newPos);
});Nicht unterstützten Eingabetyp abfangen
const num = document.createElement('input');
num.type = 'number';
console.log(num.selectionStart);
try {
num.selectionStart = 0;
} catch (err) {
console.log(err.name);
}// Wichtig · Fallstricke
- Eingabetypen: Die Eigenschaft funktioniert nur bei
text,search,url,telundpassword. Beiemailundnumberist der Wertnull, und Setzen wirftInvalidStateError. Das ist eine häufige Fehlerquelle bei Eingabemasken. - Werte schreiben: Wenn du
valueprogrammatisch änderst, springt der Cursor meist ans Ende. Merke dir die Position vorher und setze sie danach wieder, am besten mitsetSelectionRange(). - Richtung der Auswahl:
selectionStartist immer kleiner oder gleichselectionEnd, auch wenn der Nutzer von rechts nach links markiert. Die Richtung steht inselectionDirection. - Indizes: Gezählt wird in UTF-16-Codeeinheiten. Emojis und andere Zeichen außerhalb der BMP belegen deshalb zwei Positionen.
- Fokus: Die Werte bleiben auch ohne Fokus erhalten. In manchen Browsern kann das Setzen ohne Fokus aber nicht sichtbar sein oder, vor allem in älteren Safari-Versionen, den Fokus verschieben.
- Kompatibilität: Die Eigenschaft wird von allen modernen Browsern unterstützt. Bei Mehrfach-Auswahlen (z. B. in Firefox) bezieht sich der Wert auf den ersten Bereich.