HTMLTextAreaElement.selectionEnd — Eigenschaft · JavaScript-Referenz

Signatur

HTMLTextAreaElement.selectionEnd

Beschreibung

Die Eigenschaft selectionEnd gibt als nicht-negative Ganzzahl den Index hinter dem letzten ausgewählten Zeichen eines <textarea>-Elements zurück. Der Bereich zählt also wie bei String.prototype.slice(): Mit value.slice(selectionStart, selectionEnd) erhält man genau den markierten Text. Ist nichts ausgewählt, haben selectionStart und selectionEnd denselben Wert – die aktuelle Position der Einfügemarke (Cursor).

Die Eigenschaft ist beschreibbar. Setzt man sie, wird das Ende der Auswahl verschoben. Ist der neue Wert kleiner als selectionStart, wird auch selectionStart auf diesen Wert gesetzt. Werte, die über value.length hinausgehen, werden auf die Textlänge begrenzt. Sollen Anfang, Ende und Richtung gleichzeitig gesetzt werden, ist setSelectionRange() meist die bessere Wahl.

Typische Einsatzgebiete sind Editor-Funktionen wie Markdown-Toolbars (markierten Text fett machen), das Einfügen von Textbausteinen an der Cursorposition, Zeichenzähler für die Auswahl sowie das Wiederherstellen der Cursorposition, nachdem value per Skript geändert wurde.

Rückgabewert

Typ

number

Beschreibung

Index (in UTF-16-Codeeinheiten) direkt hinter dem Ende der aktuellen Auswahl bzw. die Cursorposition, wenn nichts ausgewählt ist. Beim Setzen wird der zugewiesene Wert in eine nicht-negative Ganzzahl umgewandelt.

Beispiele

Markierten Text auslesen

const textarea = document.querySelector('#editor');

textarea.addEventListener('select', () => {
  const { selectionStart, selectionEnd, value } = textarea;
  const markiert = value.slice(selectionStart, selectionEnd);
  console.log(`Auswahl ${selectionStart}–${selectionEnd}: "${markiert}"`);
});

Auswahl 6–11: "Welt!"

Markdown-Toolbar: Auswahl fett formatieren

const textarea = document.querySelector('#editor');
const boldButton = document.querySelector('#bold');

boldButton.addEventListener('click', () => {
  const { selectionStart: start, selectionEnd: end, value } = textarea;
  const auswahl = value.slice(start, end) || 'fetter Text';

  textarea.value = value.slice(0, start) + `**${auswahl}**` + value.slice(end);

  // Auswahl auf den eingefügten Text (ohne Sternchen) zurücksetzen
  textarea.focus();
  textarea.selectionStart = start + 2;
  textarea.selectionEnd = start + 2 + auswahl.length;
});

Textbaustein an der Cursorposition einfügen

const insertAtCursor = (textarea, text) => {
  const { selectionStart: start, selectionEnd: end } = textarea;
  // setRangeText erhält den Undo-Verlauf besser als value-Zuweisung
  textarea.setRangeText(text, start, end, 'end');
  console.log('Cursor jetzt bei', textarea.selectionEnd);
  textarea.focus();
};

const ta = document.querySelector('#editor');
ta.value = 'Hallo !';
ta.selectionStart = ta.selectionEnd = 6;
insertAtCursor(ta, 'Welt');

Cursor jetzt bei 10

Setzen eines kleineren Werts verschiebt auch selectionStart

const ta = document.createElement('textarea');
ta.value = 'JavaScript';
document.body.append(ta);

ta.selectionStart = 4;
ta.selectionEnd = 10;
console.log(ta.selectionStart, ta.selectionEnd);

ta.selectionEnd = 2; // kleiner als selectionStart
console.log(ta.selectionStart, ta.selectionEnd);

ta.selectionEnd = 999; // wird auf value.length begrenzt
console.log(ta.selectionEnd);

4 10 2 2 10

// Wichtig · Fallstricke

Exklusives Ende: selectionEnd zeigt hinter das letzte ausgewählte Zeichen – ideal für slice(), aber ein häufiger Grund für Off-by-one-Fehler.
UTF-16-Einheiten: Die Indizes zählen Codeeinheiten, nicht sichtbare Zeichen. Emojis oder kombinierte Zeichen belegen mehrere Positionen, was manuelles Rechnen erschweren kann.
Zeilenumbrüche: Intern werden Zeilenumbrüche im value als \n normalisiert, die Indizes beziehen sich auf diese Form (nicht auf \r\n beim Absenden des Formulars).
Zuweisung an value setzt die Auswahl in den meisten Browsern ans Textende zurück. Die Position also vorher sichern und danach wiederherstellen – oder gleich setRangeText() verwenden, das außerdem besser mit dem Rückgängig-Verlauf zusammenarbeitet als eine direkte Zuweisung.
Das Setzen der Auswahl bei einem nicht fokussierten Element kann in manchen Browsern (v. a. Safari/iOS) ohne sichtbaren Effekt bleiben. Vorher focus() aufrufen.
Die Richtung der Auswahl (vorwärts/rückwärts) steht in selectionDirection. selectionEnd ist immer ≥ selectionStart, egal in welche Richtung markiert wurde.
Kompatibilität: wird seit vielen Jahren von allen modernen Browsern unterstützt. Das Ereignis selectionchange auf Formularfeldern ist dagegen erst neuer verfügbar; als Rückfallebene dient select bzw. keyup/mouseup.

Siehe auch

HTMLTextAreaElement.selectionStart HTMLTextAreaElement.required HTMLTextAreaElement.selectionDirection HTMLTextAreaElement.placeholder HTMLTextAreaElement.readOnly