Selection.direction — Eigenschaft · JavaScript-Referenz

Signatur

Selection.direction

Beschreibung

Die Eigenschaft direction des Selection-Interfaces zeigt, in welche Richtung eine Auswahl aufgespannt wurde. Markiert der Nutzer Text von links nach rechts (bzw. in Dokumentreihenfolge), ist der Wert "forward". Beim Markieren „rückwärts“, etwa mit Shift+← oder durch Ziehen der Maus nach links oben, ist er "backward". Ist die Auswahl leer, zusammengefallen oder ohne Richtung, lautet der Wert "none".

Vor Einführung dieser Eigenschaft musste man die Richtung selbst ermitteln, indem man anchorNode/anchorOffset mit focusNode/focusOffset verglich, z. B. über Node.compareDocumentPosition(). Das war umständlich und fehleranfällig. direction liefert die Antwort direkt.

Nützlich ist das vor allem in Rich-Text-Editoren, bei eigenen Tastaturkürzeln zum Erweitern oder Verkleinern einer Auswahl und beim Speichern und Wiederherstellen einer Auswahl. Ein Range-Objekt kennt keine Richtung: Es hat immer startContainer vor endContainer. Wer die Richtung behalten will, muss sie also getrennt speichern und beim Wiederherstellen mit setBaseAndExtent() berücksichtigen.

Rückgabewert

Typ

"forward" | "backward" | "none"

Beschreibung

"forward", wenn der Fokus in Dokumentreihenfolge hinter dem Anker liegt; "backward", wenn er davor liegt; "none", wenn die Auswahl leer, zusammengefallen oder ohne Richtung ist.

Beispiele

Richtung bei jeder Auswahländerung anzeigen

document.addEventListener('selectionchange', () => {
  const sel = document.getSelection();
  if (!sel) return;
  console.log(`Typ: ${sel.type}, Richtung: ${sel.direction}`);
});

Typ: Range, Richtung: forward Typ: Range, Richtung: backward Typ: Caret, Richtung: none

Rückwärts-Auswahl per Code erzeugen

// <p id="text">Hallo Welt</p>
const textNode = document.getElementById('text').firstChild;
const sel = window.getSelection();

// Anker hinter dem Fokus -> rückwärts
sel.setBaseAndExtent(textNode, 10, textNode, 6);
console.log(sel.toString(), sel.direction);

// Anker vor dem Fokus -> vorwärts
sel.setBaseAndExtent(textNode, 0, textNode, 5);
console.log(sel.toString(), sel.direction);

Welt backward Hallo forward

Auswahl samt Richtung speichern und wiederherstellen (mit Fallback)

const getDirection = (sel) => {
  if ('direction' in sel) return sel.direction;
  // Fallback für ältere Browser
  if (sel.isCollapsed || !sel.anchorNode) return 'none';
  if (sel.anchorNode === sel.focusNode) {
    return sel.anchorOffset <= sel.focusOffset ? 'forward' : 'backward';
  }
  const pos = sel.anchorNode.compareDocumentPosition(sel.focusNode);
  return pos & Node.DOCUMENT_POSITION_FOLLOWING ? 'forward' : 'backward';
};

const saveSelection = () => {
  const sel = window.getSelection();
  if (!sel || sel.rangeCount === 0) return null;
  return { range: sel.getRangeAt(0).cloneRange(), direction: getDirection(sel) };
};

const restoreSelection = (saved) => {
  if (!saved) return;
  const { range, direction } = saved;
  const sel = window.getSelection();
  if (direction === 'backward') {
    sel.setBaseAndExtent(range.endContainer, range.endOffset,
                         range.startContainer, range.startOffset);
  } else {
    sel.setBaseAndExtent(range.startContainer, range.startOffset,
                         range.endContainer, range.endOffset);
  }
};

const saved = saveSelection();
// ... DOM-Operation, die die Auswahl verliert ...
restoreSelection(saved);
console.log(window.getSelection().direction === saved?.direction);

true

// Wichtig · Fallstricke

Browser-Kompatibilität: Die Eigenschaft ist relativ neu (Safari 17, Firefox 126, Chrome/Edge 137). Prüfe sie mit 'direction' in selection und nutze in älteren Browsern den Vergleich von anchorNode/focusNode als Fallback.
Nur lesbar: Wenn du direction einen Wert zuweist, passiert nichts. Die Richtung setzt du über setBaseAndExtent() oder extend().
Range hat keine Richtung: getRangeAt(0) liefert immer einen normalisierten Bereich (Start vor Ende). Die Richtung geht beim Speichern verloren, wenn du sie nicht getrennt merkst.
Nach addRange(), collapse() oder selectAllChildren() kann der Wert je nach Browser "none" oder "forward" sein. Verlasse dich nach programmatischen Änderungen nicht auf einen bestimmten Wert, außer du hast setBaseAndExtent() verwendet.
Die Eigenschaft gilt für die Dokumentauswahl. Für Auswahlen in <input> und <textarea> gibt es stattdessen HTMLInputElement.selectionDirection.

Siehe auch

Selection Selection.anchorNode Selection.focusNode Selection.setBaseAndExtent() Selection.extend() HTMLInputElement.selectionDirection