document.getSelection 的奇怪结果

发布于 2025-01-13 11:51:58 字数 664 浏览 3 评论 0原文

我正在开发一个应用程序，用于跟踪 HTML 页面的可内容编辑部分中的编辑。当插入某些内容时，该内容将被包装在插入了类的范围内。到目前为止，一切都很好。但我需要跟踪文本光标在内容可编辑区域内的位置（内部可能有多个跨度）。

这是我用来测试我的代码的一小部分 html（此处仅显示页面的相关部分）：

<p id="p1">
    <span id="p1s1">This manual is about</span>
    <span id="p1s2" class="inserted"> product X</span>
    <span id="p1s3" class="deleted"> something</span><span id="p1s4">.</span>
</p>

当我在“产品”一词后面单击鼠标时，结果符合预期：锚节点与focusNode 并显示 ID 'p1s2'，偏移量为 8。在产品的 p 之后单击会显示偏移量 2。但是在 'p' 前面单击会得到偏移量 1，但 ID 'p1' - 它是节点我点击了其中。

我使用最新版本的 Chrome 和 Safari 对此进行了测试，两种浏览器都显示相同的结果。这是预期的行为吗？如果我明确单击其内容，为什么我无法获得跨度的 ID？

原文

I am working on an application that keeps track of edits in a contenteditable section of an HTML page. When something is inserted, this content is wrapped inside a span with class inserted. So far, so good. But I need to keep track of where the text cursor is inside the contenteditable area (which might have multiple spans inside).

Here is a small section of html that I am using to test my code (only the relevant portion of the page is shown here):

<p id="p1">
    <span id="p1s1">This manual is about</span>
    <span id="p1s2" class="inserted"> product X</span>
    <span id="p1s3" class="deleted"> something</span><span id="p1s4">.</span>
</p>

When I click right after the word 'product' the result is as expected: the anchorNode is identical to the focusNode and shows the ID 'p1s2' with an offset 8. Clicking after the p of product shows offset 2. But clicking in front of the 'p' gives me an offset of 1 but an ID 'p1' - which is the parent of the node in which I clicked.

I tested this with the latest versions of Chrome and Safari and both browsers show the same result. Is this intended behaviour and why do I not get the ID of the span if I clearly click inside its content ?

分享到QQ

分享到微博