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)

参数

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

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
caretPositionFromPoint
options parameter

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
In development. Supported in a pre-release version.
In development. Supported in a pre-release version.
No support
No support
Has more compatibility info.

参见