如何以 div 作为背景来模仿 JS 范围/选择？

Question

我需要模仿范围/选择（那些突出显示网站上的内容，当您按 CTRL + C 时，您会复制内容），并以 div 作为背景。 “突出显示 div”很可能是 position:absolute;

<div id="highlight">
   <!-- The highlightor divs would go here -->
</div>
<div id="edit">
   <!-- The divs to be highlighted (that have text) would go here -->
</div>

编辑：复制等功能至关重要。

PS：如果您对“为什么”感到好奇，请参阅 此问题。 我创建了一个新问题，因为我觉得旧问题已经得到了很好的回答，而且这个问题与那个问题有很大不同。

Answer 1

这是概念，并有一些代码可以帮助您入门。每次在页面中选择文本时，将该文本附加到页面上的隐藏文本区域，然后选择该文本区域。然后，将原始选择包裹在一个跨度中，使其看起来像是被选中的。这样，您就有了选择的外观，并且由于实际上选择了隐藏的文本区域，因此当用户点击“ctrl+c”时，他们正在从文本区域复制文本。

为了获得您正在寻找的完整功能，您可能需要扩展它。嗅探“ctrl+a”键（用于全选）。我认为您无法覆盖右键单击行为……至少不能轻松或优雅地覆盖。但这至少是一个可供您运行的概念证明。

window.onload = init;
function init()
{
    document.getElementById("hidden").value = "";
    document.body.ondblclick = interceptSelection;
    document.body.onmouseup = interceptSelection;
}
function interceptSelection(e)
{
    e = e || window.event;
    var target = e.target || e.srcElement;
    var hidden = document.getElementById("hidden");
    if (target == hidden) return;
    var range, text;
    if (window.getSelection)
    {
        var sel = getSelection();
        if (sel.rangeCount == 0) return;
        range = getSelection().getRangeAt(0);
    }
    else if (document.selection && document.selection.createRange)
    {
        range = document.selection.createRange();
    }
    text = "text" in range ? range.text : range.toString();
    if (text)
    {
        if (range.surroundContents)
        {
            var span = document.createElement("span");
            span.className = "selection";
            range.surroundContents(span);
        }
        else if (range.pasteHTML)
        {
            range.pasteHTML("<span class=\"selection\">" + text + "</span>")
        }
        hidden.value += text;
    }
    hidden.select();
}

这是我在测试中用来隐藏文本区域并设置所选文本样式的 css：

#hidden
{
    position: fixed;
    top: -100%;
}
.selection
{
    background-color: Highlight;
    color: HighlightText;
}