Selection: direction-Eigenschaft

Die direction-Schreibgeschützte Eigenschaft des Selection-Interfaces ist ein String, der die Richtung der aktuellen Auswahl angibt.

Der Wert wird durch die Reihenfolge bestimmt, in der der Benutzer die Auswahlgrenzen festlegt. Zum Beispiel könnte ein Benutzer eine Auswahl treffen, indem er an einem Startpunkt klickt, den Cursor zieht und an einem Endpunkt loslässt. Befindet sich der Endpunkt später im Dokument als der Startpunkt, ist die Richtung "forwards", während die Richtung "backwards" ist, wenn der Endpunkt vor dem Startpunkt im Dokument liegt. Der Wert ist "directionless", wenn keine Richtung durch den Benutzer impliziert wird. Beispielsweise, wenn der Benutzer die Auswahl durch Doppelklicken auf ein Wort oder Element vorgenommen hat, oder die Auswahl programmgesteuert erstellt wurde.

Die Richtung ändert sich nicht, wenn der Bereich einer Auswahl verändert wird, zum Beispiel durch Methoden wie Range.selectNode().

Wert

Ein String, der den Typ der aktuellen Auswahl beschreibt. Mögliche Werte sind:

backward: Die Auswahl ist rückwärts.
forward: Die Auswahl ist vorwärts.
none: Es wurde keine Auswahl getroffen, oder die Auswahl ist richtungslos.

Beispiele

Dieses Beispiel ermöglicht es Ihnen, zu testen, wie die direction-Eigenschaft funktioniert, indem die aktuelle Richtung des innerhalb eines Absatzes ausgewählten Textes protokolliert wird.

HTML

Das HTML zeigt nur ein Absatz-Element mit etwas Text an, den Sie auswählen können.

html

<p id="text-box">
  Select text in this paragraph to see the selection direction.
</p>

Beachten Sie, dass es auch ein "verstecktes" Protokollfeld (und zugehörigen Code) gibt, das dem Muster im Leitfaden zum Anzeigen eines einzelnen Eintragsprotokolls für die Erstellung von Live-Beispielen folgt.

#log {
  height: 50px;
  padding: 0.5rem;
  margin: 5px;
  border: 1px solid black;
}

<pre id="log"></pre>

JavaScript

const logElement = document.querySelector("#log");

function log(text) {
  logElement.innerText = text;
}

Der Code überprüft, ob die direction-Eigenschaft definiert ist, und fügt in diesem Fall einen Listener für das selectionchange-Ereignis hinzu, welches die aktuelle Auswahl ermittelt und deren Richtung protokolliert. Wenn die Eigenschaft nicht unterstützt wird, protokolliert der Code dies und blendet den Text für die Auswahl aus.

const input = document.getElementById("text-box");

if ("direction" in Selection.prototype) {
  document.addEventListener("selectionchange", () => {
    const selection = window.getSelection();
    log(`Selection direction: ${selection.direction}`);
  });
} else {
  log("direction property not defined");
  input.hidden = true;
}

Ergebnis

Wenn die Eigenschaft unterstützt wird, wählen Sie Text per Doppelklick und Auswahl-Ziehen-Loslassen in verschiedenen Richtungen aus.

Spezifikationen

Specification
Selection API # dom-selection-direction

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch

Selection