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/

（来自小提琴的强制性 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 容器。

我在你的小提琴中添加了这几行代码来证明这一点：

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

分叉小提琴：http://jsfiddle.net/XZ6vc/

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

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

虽然有一句忠告：如果不需要，不要重新发明轮子；-) 很可能有一些库/框架可以满足您的需求。