Selection: direction 属性

基准线 2025
新推出

自 2025 年 5 月起,此功能适用于最新的设备和浏览器版本。此功能可能不适用于较旧的设备或浏览器。

directionSelection 接口的一个只读属性,它是一个字符串,用于提供当前选中文本的方向。

该值由用户选择选区边界点的顺序决定。例如,用户可以通过单击起始边界点、拖动光标,然后在结束边界点释放鼠标来完成选区。如果结束边界点在文档中的位置晚于起始点,则方向为 "forwards"(前进);如果结束点在文档中的位置早于起始点,则方向为 "backwards"(后退)。如果用户没有隐含方向(例如,通过双击单词或元素进行选区,或者选区是通过编程方式实现的),则值为 "directionless"(无方向)。

如果选区的范围发生变异(例如,使用 Range.selectNode() 等方法),方向不会改变。

描述当前选区类型的字符串。可能的值包括:

backward

选区是后退的。

forward

选区是前进的。

none

没有进行选区,或者选区是无方向的。

示例

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

HTML

HTML 仅显示一个包含一些可选文本的段落元素。

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

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

JavaScript

代码会检查 direction 属性是否已定义,如果已定义,则会添加一个 selectionchange 事件的监听器,该监听器会获取当前选区并记录其方向。如果属性不受支持,代码将记录这一事实并隐藏用于选区的文本。

js
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

浏览器兼容性

另见