jQuery Highlight Text

Sam Deering
Tweet

Simple jQuery and CSS code snippets to highlight text on page in order to select it for copy or it could be used in combination with a search script to show where matches are found on a page.


Note: CSS3-only feature (only Firefox and Safari too as far as I know).

::selection {
    background: #ffb7b7; /* Safari */
}
::-moz-selection {
    background: #ffb7b7; /* Firefox */
}

Or use a textbox:

<input type="text" id="txtInput" />
function selectAllText(textbox) {
    textbox.focus();
    textbox.select();
}
jQuery('#txtInput').click(function() { selectAllText(jQuery(this)) });

Get your free chapter of Level Up Your Web Apps with Go

Get a free chapter of Level Up Your Web Apps with Go, plus updates and exclusive offers from SitePoint.

  • Jerry

    Your online demos seem to be pointing to that json tree viewer – past couple of times…

    • jquery4u

      Hi Jerry, good spot! My bad, i’ll update the right demo link.