javascript - Firefox - 如何在使用双击时获取选定的文本

Question

我创建了一个包含文本部分和链接的 contentEditable div。双击链接将选择链接文本。

<div contentEditable="true">
   This is a text and <a href="http://www.google.com">This_is_a_link</a>
</div>

之后调用 document.getSelection().getRangeAt(0).startContainer 将返回 div:

// => <div contenteditable="true">

而不是链接。我找不到找到 div 的哪一部分被选中的方法。

查看这个 jsfiddle(双击“This_is_a_link”，将会有一个带有 startContainer 的控制台日志): http://jsfiddle.net/UExsS/1/

(来自 fiddle 的强制性 JS 代码)

$(function(){
    $('a').dblclick(function(e) {

        setTimeout(function() {
            console.log(window.getSelection().getRangeAt(0));
        }, 500);

    });
}); 

请注意，Chrome 具有正确的行为，在 Chrome 中运行上述 jsfiddle 将为 startContainer 提供 textElement。

有人遇到过这个问题吗？您找到解决方法了吗？

Answer 1

不要认为它是 Firefox 的错误，只是一种不同的实现方式。当您双击链接时，Firefox 不仅选择文本，而且选择整个 a-tag，因此选择的父节点正确设置为 div 容器。

我将这几行代码添加到您的 fiddle 中以证明这一点:

var linknode = window.getSelection().getRangeAt(0).commonAncestorContainer.childNodes[1];
console.log(linknode);        
console.log(window.getSelection().containsNode(linknode, false));

fork fiddle :http://jsfiddle.net/XZ6vc/

当您运行它时，您会在 javascript 控制台中看到 linknode 包含您的链接，并且检查链接是否完全包含在选择中会返回 true。

这也是该问题的一种可能解决方案，尽管不是理想的解决方案。遍历您的 contenteditable 中的所有链接，并检查其中一个是否完全包含在选择中。

尽管有一个建议:如果不需要，请不要重新发明轮子 ;-) 很可能有一些库/框架可以满足您的需求。