Свойство direction объекта Selection

Свойство direction только для чтения интерфейса Selection — это строка, которая задаёт направление текущего выделения.

Значение определяется порядком, в котором пользователь выбирает граничные точки выделения. Например, пользователь может выделить текст, щелкнув начальной точкой, перетащив курсор и отпустив его в конечной точке. Если конечная точка расположена дальше в документе, чем начальная, то направление — "вперёд", а если конечная точка находится раньше начальной в документе, то направление — "назад". Значение "безнаправленное" используется, если направление выделения не подразумевается пользователем. Например, если пользователь сделал выделение двойным щелчком по слову или элементу, или выделение было выполнено программно.

Направление не меняется, если диапазон выделения изменяется, например, с помощью методов, таких как Range.selectNode().

Строка, описывающая тип текущего выделения. Возможные значения:

backward

Выделение выполнено назад.

forward

Выделение выполнено вперёд.

none

Выделение не выполнено или выделение безнаправленное.

Этот пример позволяет проверить, как работает свойство direction , выведя в консоль текущее направление выделенного текста в абзаце.

HTML просто отображает элемент абзаца с некоторым текстом, который можно выделить.

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

Обратите внимание, что также есть "скрытая" область для вывода логов (и соответствующий код), следуя шаблону руководства Отображение одного лога для создания примеров.

Код проверяет, определено ли свойство direction , и если да, добавляет обработчик события selectionchange, который получает текущее выделение и выводит его направление в консоль. Если свойство не поддерживается, код выводит сообщение об этом и скрывает текст для выделения.

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

Если свойство поддерживается, выделите текст двойным щелчком и перетаскиванием в разных направлениях.

• Selection