keeping the selected text browser highlight on all the time

When some text on a document is highlighted, the default browser highlight is lost 开发者_开发百科as soon as there is a click on the document.

I want to keep the browser highlight on all the time just like apture http://www.apture.com/. Highlight some text, it will popup with a "Learn More" bubble, click on the "Learn More" button, it still won't lose the default browser highlight focus.

How do I do that?

I basically want to get the position of the selected text without adding a span AND keeping the browser highlight when clicked on a button.

Here's a simple example of how to retain the selection when the user clicks a particular element. It stores the selection Range(s) or TextRange (IE <= 8) in the mousedown event of the element and reselects those ranges in the mouseup event.

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

<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>

I've used code from here and there's a working example at http://jsfiddle.net/jrdGW/

Select some text in the top paragraph and then click on the bottom paragraph. The selection will be restored after 1 second (to show that it stores it).

Tested in Chrome, FF and IE.

Code (in case jsfiddle is down):

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

You probably need to look at selection range in JavaScript and then add a span with a class for a hook with CSS.

span.highlight {
   background: red;
}