选择：direction 属性

direction 是 Selection 接口的一个只读属性，它是一个字符串，提供当前选择的 direction。

该值由用户选择选择边界点的顺序决定。例如，用户可以通过单击起始边界点、拖动光标并在结束边界点释放来进行选择。如果结束边界点在文档中比起始点靠后，则 direction 为“forwards”，而如果结束点在文档中比起始点靠前，则 direction 为“backwards”。如果用户没有暗示 direction，则值为“directionless”。例如，如果用户通过双击某个单词或元素进行选择，或者选择是通过编程方式进行的。

如果选择的范围发生变化，例如使用 Range.selectNode() 等方法，则 direction 不会改变。

值

描述当前选择类型的字符串。可能的值为

backward: 选择是反向的。
forward: 选择是正向的。
none: 没有进行选择，或者选择是无方向的。

示例

此示例允许您通过记录段落中所选文本的当前 direction 来测试 direction 属性的工作原理。

HTML

HTML 只是显示一个包含一些文本的段落元素，您可以选择这些文本。

html

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

请注意，还有一个“隐藏”的日志框（以及相关的代码），遵循显示单个条目日志指南中编写实时示例的模式。

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

代码检查 direction 属性是否已定义，如果已定义，则为 selectionchange 事件添加一个监听器，该事件获取当前选择并记录其 direction。如果该属性不受支持，则代码会记录此事实并隐藏要选择的文本。

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 API # dom-selection-direction

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

另请参阅

选择