HTMLInputElement.selectionDirection — Eigenschaft · JavaScript-Referenz

Signatur

HTMLInputElement.selectionDirection

Beschreibung

selectionDirection ist eine les- und schreibbare Eigenschaft von HTMLInputElement. Sie gibt an, in welche Richtung eine Textauswahl entstanden ist, also ob der Benutzer von links nach rechts ("forward") oder von rechts nach links ("backward") markiert hat. Hat die Plattform keine Vorstellung von einer Auswahlrichtung oder ist die Richtung unbekannt, lautet der Wert "none".

Die Richtung entscheidet, an welchem Ende der Auswahl der Fokuspunkt sitzt, also die Stelle, an der sich der Cursor befindet. Bei "forward" ist das selectionEnd, bei "backward" ist es selectionStart. Wichtig ist das vor allem für eigene Tastenkürzel, Editor-Funktionen oder Eingabemasken: Drückt der Benutzer anschließend Umschalt + Pfeiltaste, erweitert oder verkleinert der Browser die Auswahl vom Fokuspunkt aus.

Wenn du der Eigenschaft einen Wert zuweist, ändert sich nur die Richtung. selectionStart und selectionEnd bleiben gleich. Meist ist es einfacher, Bereich und Richtung zusammen mit setSelectionRange(start, end, direction) zu setzen.

Die Eigenschaft gibt es nur bei den Eingabetypen text, search, url, tel und password. Bei anderen Typen wie email, number oder checkbox liefert das Lesen null.

Parameter

Name	Typ	Default	Beschreibung
$value (beim Setzen)	"forward" \| "backward" \| "none"		Die neue Auswahlrichtung. Jeder andere String wird als `"none"` behandelt.

Rückgabewert

Typ

string | null

Beschreibung

"forward", "backward" oder "none". null, wenn der Eingabetyp keine Textauswahl unterstützt.

Beispiele

Richtung der Auswahl beim select-Event auslesen

const input = document.querySelector('#name');

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

"Welt" markiert, Richtung: backward

Auswahl rückwärts setzen (Cursor am Anfang)

const input = document.querySelector('#suche');
input.value = 'JavaScript Referenz';
input.focus();

// Bereich und Richtung in einem Aufruf setzen
input.setSelectionRange(0, 10, 'backward');
console.log(input.selectionDirection);

// Nur die Richtung ändern – der Bereich bleibt gleich
input.selectionDirection = 'forward';
console.log(input.selectionStart, input.selectionEnd, input.selectionDirection);

backward 0 10 forward

Fokuspunkt der Auswahl ermitteln – mit Typprüfung

const getCaretPosition = (input) => {
  const dir = input.selectionDirection;
  if (dir === null) return null; // z. B. type="number" oder "email"
  return dir === 'backward' ? input.selectionStart : input.selectionEnd;
};

const zahl = document.createElement('input');
zahl.type = 'number';
console.log(getCaretPosition(zahl));

const text = document.createElement('input');
text.value = 'Hallo';
text.setSelectionRange(1, 4, 'backward');
console.log(getCaretPosition(text));

null 1

// Wichtig · Fallstricke

Nicht unterstützte Eingabetypen: Bei email, number, date, checkbox usw. liefert das Lesen null, und das Setzen löst eine InvalidStateError-DOMException aus. Prüfe den Typ vorher oder fange die Ausnahme mit try…catch ab.
Plattformunterschiede: Auf manchen Systemen gibt es keine Auswahlrichtung. Dort meldet der Browser "none", obwohl der Benutzer mit der Maus rückwärts markiert hat. Behandle "none" in deinem Code wie "forward".
Ungültige Werte beim Setzen werden ohne Fehlermeldung zu "none".
Die Richtung ist nur sichtbar, wenn das Feld den Fokus hat. Ohne Fokus werden die Werte zwar gespeichert, eine Markierung sieht der Benutzer aber nicht.
HTMLTextAreaElement hat die gleiche Eigenschaft. Alle modernen Browser unterstützen sie.

Siehe auch

HTMLInputElement.selectionStart HTMLInputElement.selectionEnd HTMLInputElement.setSelectionRange() HTMLInputElement.select() HTMLTextAreaElement.selectionDirection HTMLInputElement.multiple