4

我正在尝试制作一个小型文本编辑器。

当我选择一个文本时，我想知道所选文本是单独在 aspan还是 adiv中，然后我想改变这个元素的样式。

例子 ：

<span style="font-size:12px">Hola</span>

如果我选择Hola我想检索父节点<span style="font-size:12px">Hola</span>

<span style="font-size:56px">
Hola <span style="font-size:12px">Hello</span>
</span>

如果我选择Hello我只想检索<span style="font-size:12px">Hello</span>

现在，当我在 Chrome 中尝试时，我得到了正确的结果

range.startContainer.parentNode;

但是在第二个示例中使用 Firefox 我检索

<span style="font-size:56px">
    Hola <span style="font-size:12px">Hello</span>
</span>

如何在 Chrome 和 Firefox 中获得相同的结果？

4

1 回答 1

9

您的问题是，当一个或两个选择边界与 DOM 节点边界重合时，选择在浏览器之间的工作方式略有不同。例如，如果用户在具有以下 HTML 的页面内容中选择了单词“bar”

<p>foo<i>bar</i></p>

...选择开始有四个不同的可能位置，它们在视觉上都与用户相同：

  1. 在“foo”文本节点的末尾（节点“foo”，偏移量 3）
  2. 元素的一个子节点之后<p>（node <p>, offset 1）
  3. 在元素的零<i>个子元素之后（节点<i>，偏移量 0）
  4. 在“bar”文本节点的字符索引 0 处（节点“bar”，偏移量 0）

大多数浏览器在实践中不允许所有这些位置，但不幸的是不同的浏览器会做出不同的选择。在 Firefox 中，您所做的选择会选择整个<span>元素，选择范围startContainer是<span>的父节点。您可以通过检查范围以查看它是否选择单个节点来检测这一点：

function rangeSelectsSingleNode(range) {
    var startNode = range.startContainer;
    return startNode === range.endContainer &&
           startNode.hasChildNodes() &&
           range.endOffset === range.startOffset + 1;
}

您可以使用它来检测您拥有什么样的选择并相应地获取所选元素：

var selectedElement = null;
if (rangeSelectsSingleNode(range)) {
    // Selection encompasses a single element
    selectedElement = range.startContainer.childNodes[range.startOffset];
} else if (range.startContainer.nodeType === 3) {
    // Selection range starts inside a text node, so get its parent
    selectedElement = range.startContainer.parentNode;
} else {
    // Selection starts inside an element
    selectedElement = range.startContainer;
}
于 2013-04-08T17:10:02.347 回答