HTMLInputElement.selectionEnd — Eigenschaft · JavaScript-Referenz

Signatur

HTMLInputElement.selectionEnd

Beschreibung

selectionEnd gibt den Index des Zeichens direkt nach dem letzten markierten Zeichen im Wert eines Eingabefelds an. Zusammen mit selectionStart beschreibt die Eigenschaft den markierten Bereich: input.value.slice(input.selectionStart, input.selectionEnd) liefert genau den markierten Text. Ist nichts markiert, sind beide Werte gleich und geben die Position des Textcursors an.

Die Eigenschaft ist lesbar und schreibbar. Beim Setzen wird die Auswahl entsprechend angepasst. Ist der neue Wert kleiner als selectionStart, wird selectionStart automatisch auf denselben Wert gesetzt. Werte größer als die Länge von value werden auf diese Länge begrenzt. Wer Anfang, Ende und Richtung gleichzeitig ändern möchte, nimmt besser setSelectionRange().

Typische Einsatzfälle sind Editor-Funktionen wie Text an der Cursorposition einfügen, markierten Text mit Formatierung umschließen (z. B. Markdown), eine Zeichenzählung für die Auswahl oder das Wiederherstellen der Cursorposition, nachdem ein Wert programmatisch formatiert wurde.

Die Eigenschaft funktioniert nur bei Eingabetypen, die eine Textauswahl unterstützen: text, search, url, tel und password. Bei allen anderen Typen (z. B. email, number, date, checkbox) ist der Wert null.

Parameter

Name	Typ	Default	Beschreibung
$wert (beim Setzen)	number		Neue Endposition der Auswahl als Index in UTF-16-Codeeinheiten. Werte größer als `value.length` werden auf `value.length` begrenzt.

Rückgabewert

Typ

number | null

Beschreibung

Index nach dem letzten markierten Zeichen (bzw. die Cursorposition, wenn nichts markiert ist). null, wenn der Eingabetyp keine Textauswahl unterstützt.

Beispiele

Markierten Text auslesen

const input = document.createElement('input');
input.type = 'text';
input.value = 'Hallo Welt';
document.body.append(input);

// Auswahl programmatisch setzen: "Welt"
input.selectionStart = 6;
input.selectionEnd = 10;

const markiert = input.value.slice(input.selectionStart, input.selectionEnd);
console.log(input.selectionEnd, markiert);

10 Welt

Markierung mit Markdown-Fettschrift umschließen

const input = document.createElement('input');
input.value = 'Das ist wichtig';
document.body.append(input);
input.setSelectionRange(8, 15); // "wichtig"

const umschliessen = (feld, marke) => {
  const { selectionStart: start, selectionEnd: ende, value } = feld;
  feld.value = value.slice(0, start) + marke + value.slice(start, ende) + marke + value.slice(ende);
  // Auswahl bleibt auf dem ursprünglichen Wort
  feld.selectionStart = start + marke.length;
  feld.selectionEnd = ende + marke.length;
  feld.focus();
};

umschliessen(input, '**');
console.log(input.value, input.selectionStart, input.selectionEnd);

Das ist **wichtig** 10 17

Text an der Cursorposition einfügen und Cursor dahinter setzen

const input = document.createElement('input');
input.value = 'Preis:  EUR';
document.body.append(input);
input.focus();
input.setSelectionRange(7, 7); // Cursor zwischen den Leerzeichen

const einfuegen = (feld, text) => {
  const start = feld.selectionStart;
  const ende = feld.selectionEnd;
  feld.value = feld.value.slice(0, start) + text + feld.value.slice(ende);
  const neu = start + text.length;
  feld.selectionStart = neu;
  feld.selectionEnd = neu;
};

einfuegen(input, '19,99');
console.log(input.value, input.selectionEnd);

Preis: 19,99 EUR 12

Nicht unterstützte Eingabetypen erkennen

const email = document.createElement('input');
email.type = 'email';
console.log(email.selectionEnd);

try {
  email.selectionEnd = 2;
} catch (err) {
  console.log(err.name);
}

null InvalidStateError

// Wichtig · Fallstricke

Nicht unterstützte Typen: Bei email, number, date usw. liefert das Lesen null, und das Setzen wirft eine InvalidStateError-DOMException. Wer eine E-Mail-Eingabe mit Cursorsteuerung braucht, nimmt type="text" mit inputmode="email".
UTF-16-Indizes: Die Positionen zählen UTF-16-Codeeinheiten, keine sichtbaren Zeichen. Emojis oder andere Zeichen außerhalb der BMP zählen als 2, was bei eigenen Cursorberechnungen zu Verschiebungen führen kann.
Exklusives Ende: selectionEnd zeigt hinter das letzte markierte Zeichen und passt daher direkt zu String.prototype.slice().
Einzelzuweisungen: Wer erst selectionStart und dann selectionEnd setzt, kann ungewollt eine Anpassung auslösen, wenn der neue Start hinter dem alten Ende liegt. Mit setSelectionRange(start, ende) passiert das nicht.
Wert neu zuweisen: Wird value geändert, setzen Browser den Cursor meist ans Ende. Deshalb die Position vorher sichern und danach wiederherstellen.
Die Richtung der Auswahl (rückwärts oder vorwärts markiert) steht in selectionDirection. selectionEnd ist immer ≥ selectionStart.
Die Eigenschaft wird von allen modernen Browsern unterstützt. HTMLTextAreaElement bietet eine gleichnamige Eigenschaft mit demselben Verhalten.

Siehe auch

HTMLInputElement.selectionStart HTMLInputElement.checked HTMLInputElement.formAction HTMLInputElement.multiple HTMLInputElement.required