Question

我需要模仿范围/选择（突出显示网站上内容的内容，当您按下ex 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：如果您对“为什么”感到好奇，请参阅this question。我创造了一个新问题，因为我觉得旧问题得到了很好的回答，而且这个问题与那个问题有很大不同。

Answer 1

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

要获得您正在寻找的全部功能，您可能希望扩展此功能。嗅探“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();
}

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

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

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

1 个答案: