Jquery: is there a way to highlight the text of a Div when you click on it?

Question

With Jquery is there a way to highlight/select(like if someone were to select it with the mouse) the text inside of a div that i click on? not a textbox, just a normal div.

i'm trying to make a 'short url' box, where when someone clicks on the textarea, it highlights all the text, but it also needs to NOT allow people to change the text in the textbox, but when a textbox is disabled you can't select any text, so i'm trying to do that, i just thought a div would be easiest.

sorry guys i didn't do a great job of explaining what i meant at first, added info above to clarify.

Haven't found anything on my usual search, could you not style an input box to look like your div? — Ben Everard, Oct 25 '10 at 08:12
Can you explain why you want to do this? Do you just want the background colour to change or select the text to allow for copying. — Ben Everard, Oct 25 '10 at 08:17
well, i'm trying to make a 'short url' box, where when someone clicks on the textarea, it highlights all the text, but it also needs to NOT allow people to change the text in the textbox, but when a textbox is disabled you can't select any text, so i'm trying to do that, i just thought a div would be easiest. — android.nick, Oct 25 '10 at 08:18
nice, I didn't know i could do that. i'm just gonna use a textbox, selecting text on a page takes way too much compared to a textbox — android.nick, Oct 25 '10 at 08:23
possible duplicate of [JQuery: Selecting Text in an Element (akin to highlighting with your mouse)](http://stackoverflow.com/questions/985272/jquery-selecting-text-in-an-element-akin-to-highlighting-with-your-mouse) — Jason, Nov 17 '11 at 21:15

score 20 · Accepted Answer · answered Oct 25 '10 at 08:25

Right, this isn't about background colours, it's about selecting the text.

First set an input to readonly, stopping people changing the value:

<input type="text" readonly="readonly" value="ABC" />

Then using jQuery (or similar) to select the text once it's been clicked:

$('input').click(function() {
    $(this).select(); 
});

You should style this input as you see fit, perhaps to make it look like a normal bit of text, take a look at this jsFiddle for a further demonstration.

score 4 · Answer 2 · answered Oct 25 '10 at 08:10

$("div.myDiv").click(function() {
   $(this).css("background-color", "yellow");
})

Or you can add a class:

$("div.myDiv").click(function() {
   if($(this).hasClass("highlited")) {
      $(this).removeClass("highlited");
   } else {
      $(this).addClass("highlited");
   }
}

score 2 · Answer 3 · answered Oct 25 '10 at 08:10

2

You can modify the CSS of the element after it has been clicked. Something like (untested):

$(".el").click( function() {

  $(".el").css( "color", "red" ).css( "background-color", "yellow" );

});

answered Oct 25 '10 at 08:10

Steve Claridge

10,650
8
33
35

3

Although the author says "highlight", I suspect he wants to select the text to allow someone to copy an entire section of text to the clipboard. – Ben Everard Oct 25 '10 at 08:11
Good point, In that case Mark B's answer below is more the thing – Steve Claridge Oct 25 '10 at 08:18

score 2 · Answer 4 · answered Oct 25 '10 at 08:40

2

You can use a textarea and instead of disabling it, use the 'readonly' attribute

<textarea name="selectable" readonly="readonly" />

answered Oct 25 '10 at 08:40

andho

1,166
1
15
27

score 1 · Answer 5 · answered Oct 25 '10 at 08:20

Here's a quick and dirty jQuery-less code snippet I put together some time ago:

/*
 * Creates a selection around the node
 */
function selectNode(myNode){
    // Create a range
    try{ // FF
        var myRange = document.createRange();
    }catch(e){
        try{ // IE
            var myRange = document.body.createTextRange();
        }catch(e){
            return;
        }
    }

    // Asign text to range
    try{ // FF
        myRange.selectNode(myNode);
    }catch(e){
        try{ // IE
            myRange.moveToElementText(myNode);
        }catch(e){
            return;
        }
    }

    // Select the range
    try{ // FF
        var mySelection = window.getSelection();
        mySelection.removeAllRanges(); // Undo current selection
        mySelection.addRange(myRange);
    }catch(e){
        try{ // IE
            myRange.select();
        }catch(e){
            return;
        }
    }
}

It could use a lot of improvement (I specially hate the over-abundance of try...catch blocks) but it's a good starting point. With "node" I mean an item from the DOM tree.

score 0 · Answer 6 · answered Oct 25 '10 at 08:11

0

Working demo

If you talk only about clicking and not selecting inside any div. It would be something like this:

$("div").click(function()
             {
                $(this).css({"background":"yellow"});
             });

answered Oct 25 '10 at 08:11

netadictos

7,602
2
42
69

score 0 · Answer 7 · answered Oct 25 '10 at 08:13

0

why not just use css:

div.<someclass>:focus {
    background:yellow;
}

answered Oct 25 '10 at 08:13

joni

5,402
1
27
40

score 0 · Answer 8 · edited May 23 '17 at 12:02

0

A selection is defined by an range object in DOM - so you have to work with them (document.createRange or document.createTextRange). See this SO thread: Selecting text in an element (akin to highlighting with your mouse)

edited May 23 '17 at 12:02

Community

1
1

answered Oct 25 '10 at 08:17

VinayC

47,395
5
59
72

Jquery: is there a way to highlight the text of a Div when you click on it?

8 Answers8

Linked