CODEWITHSUNDEEP
jqueryselectclickhighlight
android.nick
android.nick

Reputation: 11197

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

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.

Upvotes: 17

Views: 15938

Answers (8)

andho
andho

Reputation: 1172

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

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

Upvotes: 2

Ben Everard
Ben Everard

Reputation: 13804

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.

Upvotes: 20

&#193;lvaro Gonz&#225;lez
&#193;lvaro Gonz&#225;lez

Reputation: 146380

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.

Upvotes: 1

VinayC
VinayC

Reputation: 49165

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)

Upvotes: 0

joni
joni

Reputation: 5462

why not just use css:

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

Upvotes: 0

netadictos
netadictos

Reputation: 7722

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

Upvotes: 0

Alex Rashkov
Alex Rashkov

Reputation: 10015

$("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");
   }
}

Upvotes: 4

Steve Claridge
Steve Claridge

Reputation: 11080

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

});

Upvotes: 2

Related Questions