Document:caretPositionFromPoint() 方法
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Document
接口的 caretPositionFromPoint()
属性返回一个 CaretPosition
对象,其中包含 DOM 节点以及该节点内光标和光标的字符偏移量。
语法
js
caretPositionFromPoint(x, y)
参数
返回值
一个 CaretPosition
对象。
示例
在下面的演示段落中单击任意位置即可在单击点处插入换行符。其代码位于演示下方。
演示
以下代码首先检查 document.caretPositionFromPoint
支持情况,但如果浏览器不支持,则代码会检查 document.caretRangeFromPoint
并使用它。
JavaScript
js
function insertBreakAtPoint(e) {
let range;
let textNode;
let offset;
if (document.caretPositionFromPoint) {
range = document.caretPositionFromPoint(e.clientX, e.clientY);
textNode = range.offsetNode;
offset = range.offset;
} else if (document.caretRangeFromPoint) {
// 使用 WebKit 专有回退方法
range = document.caretRangeFromPoint(e.clientX, e.clientY);
textNode = range.startContainer;
offset = range.startOffset;
} else {
// 两个方法都不支持,什么都不做
return;
}
// 只分割 TEXT_NODE
if (textNode?.nodeType === 3) {
let replacement = textNode.splitText(offset);
let br = document.createElement("br");
textNode.parentNode.insertBefore(br, replacement);
}
}
let paragraphs = document.getElementsByTagName("p");
for (const paragraph of paragraphs) {
paragraph.addEventListener("click", insertBreakAtPoint, false);
}
HTML
html
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita
kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
规范
Specification |
---|
CSSOM View Module # dom-document-caretpositionfrompoint |
浏览器兼容性
BCD tables only load in the browser