Question

我有很多满足感的div。

当我通过在可信任的div中高亮显示来选择文本时，我想要检索contenteditable div元素。

例如：

<div contenteditable="true">

Hello World, 

<i>this is <b>a dog</b> in the garden</i>

Thank you very much

</div>

因此，当我通过突出显示选择文本“dog”时，我想检索contenteditable div元素，以便知道我使用了哪个contenteditable div。

一个想法？

编辑：

我制作了这段代码，但并不完美：

var selection = window.getSelection();

    var node = selection.anchorNode;

    for(var i = 0; i < 50; i++)
    {
        node = node.parentNode;

        if(node.getAttribute("contenteditable") == "true")
        {
            console.log("found");
            break;  
        }
    }

Answer 1

我认为之前的答案过于复杂。

无论选择文本还是单击元素，都是一样的。

您需要能够识别您点击或按下某个键的当前元素（否则我看不出您如何能够明智地制作出令人满意的工作）。

假设你可以做到这一点，你需要做的就是从CurrentElm返回到具有带循环的contenteditable属性的父级 - 而Elm.contenteditable！= true {Elm = Elm.parent}

我承认不提供完整的编程细节，但如果您需要，我可以。

第一个问题是能够在mouseclick或keypress上识别CurrentElm。

如果你不能这样做，那就回到我身边，我会解释 - 其余部分变得容易了。

Answer 2

在突出显示文本后，您需要触发事件。不幸的是，没有onhighlight事件，所以你必须使用像onmouseup这样的东西。

接下来，您需要一种向所有contenteditable div添加事件侦听器的方法。使用此方法的一种方法是document.querySelectorAll()。但是你可能会发现将一个事件监听器添加到＆＃34; parent＆＃34;这些divs中继续执行以下指示。

mouseup的事件侦听器将提供事件对象。见https://developer.mozilla.org/en-US/docs/Web/Events/mouseup。此对象具有值currentTarget，它将为您提供发生mouseup事件的元素，而该事件又是突出显示发生的元素。

Answer 3

似乎已经提出了这个问题：

javascript to get paragraph of selected text in web page

这是另一个例子：

http://www.codetoad.com/javascript_get_selected_text.html

如何找到文本选择的顶级父元素？

3 个答案: