Question

当文档上的某些文字突出显示时，只要点击文档，默认的浏览器突出显示就会丢失。

我希望像apture http://www.apture.com/一样始终保持浏览器的高亮显示。突出显示一些文字，它会弹出一个“了解更多”的泡泡，点击“了解更多”按钮，它仍然不会丢失默认的浏览器高亮焦点。

我该怎么做？

我基本上想要在不添加跨度的情况下获取所选文本的位置，并在单击按钮时保持浏览器高亮显示。

Answer 1

以下是如何在用户单击特定元素时保留选择的简单示例。它将选择Range（s）或TextRange（IE <= 8）存储在元素的mousedown事件中，并在mouseup事件中重新选择这些范围。 / p>

<script type="text/javascript">
    var saveSelection, restoreSelection;
    if (window.getSelection) {
        // IE 9 and non-IE
        saveSelection = function() {
            var sel = window.getSelection(), ranges = [];
            if (sel.rangeCount) {
                for (var i = 0, len = sel.rangeCount; i < len; ++i) {
                    ranges.push(sel.getRangeAt(i));
                }
            }
            return ranges;
        };

        restoreSelection = function(savedSelection) {
            var sel = window.getSelection();
            sel.removeAllRanges();
            for (var i = 0, len = savedSelection.length; i < len; ++i) {
                sel.addRange(savedSelection[i]);
            }
        };
    } else if (document.selection && document.selection.createRange) {
        // IE <= 8
        saveSelection = function() {
            var sel = document.selection;
            return (sel.type != "None") ? sel.createRange() : null;
        };

        restoreSelection = function(savedSelection) {
            if (savedSelection) {
                savedSelection.select();
            }
        };
    }

    window.onload = function() {
        var specialDiv = document.getElementById("special");
        var savedSel = null;

        specialDiv.onmousedown = function() {
            savedSel = saveSelection();
        };

        specialDiv.onmouseup = function() {
            restoreSelection(savedSel);
        };
    };
</script>

<p>
    Select something up here and click on one of the areas below.
    <b>The first will lose the selection</b>, while the second will keep it.
</p>
<div style="border: solid blue 1px">Normal div</div>
<div id="special" style="border: solid blue 1px">Special div.
    Press me and keep the selection</div>

Answer 2

我使用了代码from here，http://jsfiddle.net/jrdGW/有一个有效的例子

在顶部段落中选择一些文字，然后点击底部的段落。选择将在1秒后恢复（以显示它存储它）。

在Chrome，FF和IE中测试过。

代码（如果jsfiddle已关闭）：

var RNG = null;

function GSel() {
    var d = document;
    if (d.selection) {
        return d.selection.type == "Text" ? d.selection : null;
    }
    if (window.getSelection) {
        return window.getSelection();
    }
    return null;
}

function CRng() {
    var sel = GSel();
    if (sel) {
        if (sel.createRange) {
            return sel.createRange();
        }
        if (sel.rangeCount && sel.getRangeAt) {
            return sel.getRangeAt(0);
        }
    }
    return null;
}

function Sel(rng) {
    if (rng.select) {
        rng.select();
    }
    else {
        var s = GSel();
        if (s.removeAllRanges && s.addRange) {
            s.removeAllRanges();
            s.addRange(rng);
        }
    }
}


$(document).ready(function() {
    $('#learn').mousedown(function() {
        RNG = CRng();
        setTimeout(function() {
            if (RNG) {
                Sel(RNG);
            }
        }, 1000);
    });
});

Answer 3

您可能需要查看JavaScript中的选择范围，然后使用CSS为带钩的类添加一个span。

span.highlight {
   background: red;
}

保持所选文本浏览器始终高亮显示

3 个答案: