Question

我遇到文本选择的错误行为，仅在FF中发生。

单击li元素的项目符号FF显示整个li元素的选择范围，但在JS中获得此选择范围只会选择1个字符，这显然是不正确的。

通过从文本开始拖动选择来选择文本会为当前选择创建正确的Range。

现场小提琴描绘问题：http://jsfiddle.net/keaukraine/4ZE3a/

Answer 1

你误解了范围。范围边界表示为节点内的偏移量;如果该节点是文本节点，则它是该节点文本中的字符偏移量。但是，如果节点是元素，则偏移量是边界之前的子节点数，而不是字符偏移量。在这种情况下，选择范围的起始边界位于<li>元素中的偏移0处，而结束边界位于<li>元素中的偏移1处。 <li>元素只有一个子节点（文本节点），因此范围包含所有元素的内容。

Answer 2

Tim Down的另一个答案是对的，这是相关的documentation：

如果startContainer是Text，Comment或CDATASection类型的节点，则[startOffset]是从startContainer的开头到Range的边界点的字符数。对于其他Node类型，startOffset是startContainer的开头和Range的边界点之间的子节点数。

问题是，您无法轻易检测到元素或文本节点是否被点击，因为节点不会触发事件。这是一个快速的解决方法：

将li内容包含在span个元素中。现在，您可以检查选择了哪个元素并相应地计算偏移量。

<ul>
    <li>
        <span>first item</span>
    </li>
    <!-- ... -->
</ul>

var startOffset, endOffset;
if(e.target.tagName == 'LI') {
     startOffset = 0;
     endOffset = e.target.textContent.trim().length;
} else if(e.target.tagName == 'SPAN') {
    startOffset = range.startOffset;
    endOffset = range.endOffset;
}

使用<ul> </ul>进行文本选择的行为不正确

2 个答案: