Selection.collapseToEnd() — Methode · JavaScript-Referenz

Signatur

Selection.prototype.collapseToEnd()

Beschreibung

Selection.collapseToEnd() reduziert eine bestehende Auswahl auf einen einzigen Punkt: das Ende (focusNode/anchorNode je nach Richtung, genauer: den End-Randpunkt) des letzten Range in der Selektion. Nach dem Aufruf ist selection.isCollapsed true, anchorNode und focusNode sind identisch, und es wird kein Text mehr hervorgehoben.

Typische Einsatzfälle sind Editoren und contenteditable-Bereiche: Nach dem programmatischen Einfügen oder Formatieren von Inhalt soll der Cursor hinter dem bearbeiteten Text stehen, damit der Nutzer direkt weiterschreiben kann. Ebenso nützlich ist die Methode, um nach einer „Alles markieren“-Aktion den Cursor ans Ende zu setzen oder eine Markierung aufzuheben, ohne die Cursorposition zu verlieren.

Das Gegenstück ist Selection.collapseToStart(), das auf den Anfang des ersten Bereichs zusammenklappt. Wer einen beliebigen Punkt ansteuern will, verwendet Selection.collapse(node, offset).

Beispiele

Markierung aufheben, Cursor ans Ende setzen

const selection = window.getSelection();

if (selection.rangeCount > 0 && !selection.isCollapsed) {
  console.log('Vorher markiert:', selection.toString());
  selection.collapseToEnd();
  console.log('Zusammengeklappt:', selection.isCollapsed);
}

Vorher markiert: Hallo Welt Zusammengeklappt: true

Cursor nach Einfügen in contenteditable ans Ende setzen

const editor = document.querySelector('#editor'); // <div id="editor" contenteditable>

const insertSnippet = (text) => {
  editor.focus();
  const selection = window.getSelection();
  if (selection.rangeCount === 0) return;

  const range = selection.getRangeAt(0);
  range.deleteContents();
  const node = document.createTextNode(text);
  range.insertNode(node);

  // Neuen Knoten markieren und Cursor dahinter platzieren
  range.selectNode(node);
  selection.removeAllRanges();
  selection.addRange(range);
  selection.collapseToEnd();
};

document.querySelector('#btn-sig').addEventListener('click', () => {
  insertSnippet('— Mit freundlichen Grüßen');
});

Gesamten Inhalt eines Elements auswählen und Cursor ans Ende

const moveCaretToEnd = (element) => {
  element.focus();
  const selection = window.getSelection();
  selection.selectAllChildren(element);
  selection.collapseToEnd();
};

moveCaretToEnd(document.querySelector('[contenteditable]'));
console.log(window.getSelection().isCollapsed);

true

// Wichtig · Fallstricke

Leere Selektion: Ist rangeCount gleich 0, wirft der Aufruf eine InvalidStateError-DOMException. Vorher immer selection.rangeCount > 0 prüfen.
Richtung spielt keine Rolle: Es zählt das Dokument-Ende des Bereichs, nicht der focusNode. Wurde von rechts nach links markiert, landet der Cursor trotzdem hinter dem markierten Text.
Formularfelder: Für <input> und <textarea> ist die Selection-API ungeeignet; dort setSelectionRange(el.value.length, el.value.length) verwenden.
Fokus: Damit der Cursor in einem contenteditable-Element sichtbar blinkt, muss das Element vorher fokussiert werden (element.focus()).
Mehrere Bereiche: Nur Firefox unterstützt mehrere Ranges pro Selektion; dort wird auf das Ende des letzten Range zusammengeklappt.
Die Methode wird von allen modernen Browsern unterstützt; ältere Spezifikationen kannten zusätzlich die Variante über Range.collapse(false).

Siehe auch

Selection.collapse() Range.collapse() Selection Selection.collapseToStart() Selection.containsNode()