Selection: direction 属性
direction 是 Selection 接口的一个只读属性,它是一个字符串,用于提供当前选中文本的方向。
该值由用户选择选区边界点的顺序决定。例如,用户可以通过单击起始边界点、拖动光标,然后在结束边界点释放鼠标来完成选区。如果结束边界点在文档中的位置晚于起始点,则方向为 "forwards"(前进);如果结束点在文档中的位置早于起始点,则方向为 "backwards"(后退)。如果用户没有隐含方向(例如,通过双击单词或元素进行选区,或者选区是通过编程方式实现的),则值为 "directionless"(无方向)。
如果选区的范围发生变异(例如,使用 Range.selectNode() 等方法),方向不会改变。
值
描述当前选区类型的字符串。可能的值包括:
示例
此示例允许您通过记录段落中文本当前选区方向来测试 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 |
浏览器兼容性
加载中…