Javascript 使选定的文本浏览器始终亮显

当文档上的某些文本高亮显示时，只要单击文档，默认浏览器高亮显示就会丢失

我想像apture一样一直保持浏览器高亮显示。突出显示一些文本，它将弹出一个“了解更多”气泡，单击“了解更多”按钮，它仍然不会丢失默认的浏览器突出显示焦点

我该怎么做

---

我基本上希望获得所选文本的位置，而无需添加span并在单击按钮时保持浏览器高亮显示。

您可能需要查看JavaScript中的选择范围，然后添加一个span，其中包含一个用于CSS挂钩的类

span.highlight {
   background: red;
}

---

下面是一个简单的示例，说明了当用户单击特定元素时如何保留选择。它存储选择的

范围

（s）或

文本范围

（即我使用了代码，在

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

在铬、FF和IE中测试

代码（如果JSFIDLE关闭）：

---

我已经在使用rangy将所选文本包装到一个范围中。问题是我不想在范围中添加自定义背景色。我希望它只使用默认的浏览器突出显示样式。@Haris这可能不是一个选项。@Haris:我想当您单击“了解更多信息”时，Apture会显式地设置所选内容按钮。@Haris:我已经发布了一个答案。Downvoter:请解释。这个答案有效并回答了问题。嗨，Tim，我把你的代码粘贴到了小提琴（）上，似乎没有在Chrome上工作。我做错了什么？仅供参考，当我选择文本并单击第二个div（蓝色边框内）时，将取消选择div中选定的文本。当鼠标单击伪元素时，突出显示的文本将保持选中/突出显示状态。浏览器：FF 33。如果跨浏览器工作，这可能是另一种解决方案。如果您感兴趣，请对此进行检查。这与我的答案基本相同，我的答案现在收到了完全不合理的拒绝投票。现在所有答案都需要使用JSFIDLE吗？我发布它是因为我无法在任何浏览器中使用您的答案（我没有拒绝投票）。真的吗？在所有浏览器中都适用。即使您只将代码逐字复制到空文件中，而不必费心放入

和

标记，也可以。

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);
    });
});