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（双击＆＃34; This_is_a_link＆＃34;并且将有一个带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中的所有链接，并检查其中一个链接是否完全包含在选择中。

虽然有一句忠告：如果你不需要，不要重新发明轮子;-)很可能有一些适合你需要的图书馆/框架。

Firefox - 使用双击时如何获取所选文本

1 个答案: