keeping the selected text browser highlight on all the time

Question

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.

Answer 1

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

Answer 2

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.

<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(0));
                }
            }
            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 3

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