Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://developer.mozilla.org/en-US/docs/Web/API/Selection/direction below:

Selection: direction property - Web APIs

Baseline 2025

Newly available

The direction read-only property of the Selection interface is a string that provides the direction of the current selection.

The value is determined by the order in which the user chooses the boundary points of the selection. For example, a user might make a selection by clicking a starting boundary point, dragging the cursor, and releasing at an end boundary point. If the end boundary point is later in the document than the start point, then the direction is "forwards", while the direction is "backwards" if the end point is before the start point within the document. The value is "directionless" if no direction is implied by the user. For example, if the user made the selection by double-clicking on a word or element, or the selection was made programmatically.

The direction does not change if a selection's range is mutated, for example, using methods like Range.selectNode().

A string describing the type of the current selection. Possible values are:

backward

The selection is backwards.

forward

The selection is forwards.

none

No selection has been made, or the selection is directionless.

This example allows you to test how the direction property works by logging the current direction of text selected within a paragraph.

The HTML just displays a paragraph element with some text that you can select.

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

Note that there is also a "hidden" logging box (and associated code), following the pattern in the Display a single entry log guide for writing live samples.

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

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

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

The code checks whether the direction property is defined, and if so, adds a listener for the selectionchange event, which gets the current selection and logs its direction. If the property is not supported, the code logs this fact and hides the text for selection.

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;
}

If the property is supported, select text using double click, and select-drag-release in different directions.

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4