HTMLTextAreaElement.selectionDirection — Eigenschaft · JavaScript-Referenz

Signatur

HTMLTextAreaElement.selectionDirection

Beschreibung

Die Eigenschaft selectionDirection gibt an, in welche Richtung der Nutzer den Text in einem <textarea> markiert hat. Bei "forward" wurde die Auswahl von links nach rechts (bzw. von oben nach unten) aufgezogen. Der Cursor, also der „Fokuspunkt“, steht dann bei selectionEnd. Bei "backward" lief die Auswahl in die Gegenrichtung, und der Cursor steht bei selectionStart. "none" heißt, dass keine Richtung bekannt ist. Das kommt zum Beispiel auf Plattformen vor, die keine Auswahlrichtung kennen.

Die Eigenschaft ist lesbar und schreibbar. Setzt man sie, bleiben selectionStart und selectionEnd gleich, nur die Richtung ändert sich. Das entspricht dem Aufruf setSelectionRange(start, end, richtung) mit den aktuellen Grenzen. Ungültige Werte werden als "none" behandelt.

Gebraucht wird die Richtung vor allem in Editoren, bei eigenen Tastenkürzeln wie Umschalt+Pfeil und beim Speichern und Wiederherstellen einer Auswahl. Dort muss man wissen, an welchem Ende der Auswahl sich der Cursor gerade befindet.

Rückgabewert

Typ

"forward" | "backward" | "none"

Beschreibung

Ein String mit der aktuellen Auswahlrichtung. Beim Schreiben wird ein ungültiger Wert als "none" gespeichert.

Beispiele

Auswahlrichtung beim Markieren auslesen

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

// Das Ereignis 'select' feuert, sobald der Nutzer Text markiert
textarea.addEventListener('select', () => {
  const { selectionStart, selectionEnd, selectionDirection } = textarea;
  console.log(`Auswahl ${selectionStart}–${selectionEnd}, Richtung: ${selectionDirection}`);
});

Auswahl 4–11, Richtung: backward

Cursorposition (Fokuspunkt) ermitteln

const getCaretPosition = (el) =>
  el.selectionDirection === 'backward' ? el.selectionStart : el.selectionEnd;

const textarea = document.querySelector('#editor');
textarea.value = 'Hallo Welt';
textarea.setSelectionRange(0, 5, 'backward');
console.log(getCaretPosition(textarea));

Auswahl speichern und mit Richtung wiederherstellen

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

const saveSelection = (el) => ({
  start: el.selectionStart,
  end: el.selectionEnd,
  direction: el.selectionDirection
});

const restoreSelection = (el, sel) => {
  el.focus();
  el.setSelectionRange(sel.start, sel.end, sel.direction);
};

const saved = saveSelection(textarea);
// ... Inhalt z. B. per Formatierungs-Button ändern ...
restoreSelection(textarea, saved);
console.log(textarea.selectionDirection);

forward

Richtung direkt setzen

const textarea = document.querySelector('#editor');
textarea.value = 'JavaScript';
textarea.focus();
textarea.setSelectionRange(0, 4);

textarea.selectionDirection = 'backward';
console.log(textarea.selectionStart, textarea.selectionEnd, textarea.selectionDirection);

textarea.selectionDirection = 'quer'; // ungültiger Wert
console.log(textarea.selectionDirection);

0 4 "backward" "none"

// Wichtig · Fallstricke

Plattformabhängig: Unter macOS geben manche Browser bei fehlender Richtung früher \"none\" statt \"forward\" zurück. Wer sich darauf verlässt, sollte \"none\" wie \"forward\" behandeln.
Eine leere Auswahl (nur ein Cursor, selectionStart === selectionEnd) hat keine sinnvolle Richtung. Der Wert ist dann meist \"none\" oder \"forward\".
Die Richtung zu setzen ändert nicht, welcher Text markiert ist. Es verschiebt nur den Fokuspunkt, also das Ende, das per Umschalt+Pfeil weiter verändert wird.
Bei HTMLInputElement gibt es dieselbe Eigenschaft. Dort wirft der Zugriff aber bei Typen ohne Textauswahl (z. B. number, email) eine InvalidStateError-Ausnahme. Beim <textarea> kann das nicht passieren.
Browser-Unterstützung: Chrome, Edge, Firefox und Safari unterstützen die Eigenschaft seit vielen Jahren. Der Internet Explorer kennt sie nicht.

Siehe auch

HTMLTextAreaElement.selectionStart HTMLTextAreaElement.selectionEnd HTMLTextAreaElement.setSelectionRange() HTMLTextAreaElement.select() HTMLInputElement.selectionDirection HTMLTextAreaElement HTMLTableRowElement.sectionRowIndex