Firefox - 如何在使用双击时获取选定的文本 [英] Firefox - how to get selected text when using double click

问题描述

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

 < div contentEditable =true> 
这是一段文字，< a href =http://www.google.com> This_is_a_link< / a> 
< / div> 
  

之后调用document.getSelection（）。getRangeAt（0）.startContainer将返回div： p>

  // => < div contenteditable =true> 
  

而不是链接。

看到这个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 。

有没有人遇到这个问题？你找到一个解决方法吗？解决方案不要认为它是一个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中的所有链接，并检查它们中的一个是否完全包含在选择中。

虽然有一个建议：不要重新发明轮子不需要;-)很可能有一些图书馆/框架适合您的需求。

I created a contentEditable div with a text portion and a link. Double clicking the link will select the link text.

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

Afterwards calling document.getSelection().getRangeAt(0).startContainer will return the div:

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

Instead of the link. I cannot find a way to find which part of the div is selected.

See this jsfiddle (double click the "This_is_a_link" and there will be a console log with startContainer): http://jsfiddle.net/UExsS/1/

(Obligatory JS code from the fiddle)

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

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

    });
}); 

Note, that Chrome has the correct behavior, and running the above jsfiddle in Chrome will give textElement for startContainer.

Has anyone run into this issue? did you find a workaround?

解决方案

Don't think its a bug of Firefox, just a different kind of implementation. When you double click the link, Firefox selects not only the text, but the whole a-tag, so the parent node of the selection is correctly set to the div container.

I added these few lines of code to your fiddle to proof that point:

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

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

When you run it, you'll see in the javascript console that linknode contains your link, and the check if the link is fully contained in the selection returns true.

This is also one possible solution to the problem, albeit not ideal one. Iterate over all the links in your contenteditable and check if one of them is fully contained in the selection.

Though one word of advice: Don't reinvent the wheel if you don't have to ;-) There's quite possibly some libraries / frameworks out there that fit your needs.

这篇关于Firefox - 如何在使用双击时获取选定的文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！