Как имитировать диапазоны / выборки JS с элементами div в качестве фона? - PullRequest
Новая
       14

Как имитировать диапазоны / выборки JS с элементами div в качестве фона?

3 голосов
/ 25 января 2011

Мне нужно имитировать диапазоны / выборки (те, которые выделяют контент на веб-сайте, а когда вы нажимаете для ex CTRL + C, вы копируете контент) с divs в качестве фона.Скорее всего, «подсветка 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: Если вам интересно узнать «почему», обратитесьна этот вопрос .Я создал новый вопрос, потому что я чувствовал, что на старый был дан большой ответ, и этот вопрос сильно отличался от этого.

1 Ответ

0 голосов
/ 29 января 2011

Вот концепция, с некоторым кодом, чтобы вы начали. Каждый раз, когда текст выделяется на странице, добавляйте этот текст к скрытой текстовой области на странице, а затем выберите текстовую область. Затем оберните исходное выделение в промежуток, чтобы он выглядел выделенным. Таким образом, у вас появляется вид выделения, и, поскольку скрытая текстовая область фактически выбрана, когда пользователь нажимает «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;
}
...