JavaScript
Article

jQuery Highlight Text

By Sam Deering

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:


function selectAllText(textbox) {
    textbox.focus();
    textbox.select();
}
jQuery('#txtInput').click(function() { selectAllText(jQuery(this)) });
Sam Deering
Meet the author
Sam Deering is a Front-end Web Developer who specialises in JavaScript & jQuery. Sam is driven and passionate about sharing his knowledge to educate others.
  • 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.

Recommended

Learn Coding Online
Learn Web Development

Start learning web development and design for free with SitePoint Premium!

Get the lastest in JavaScript, once a week, for free.