Question

I have a text field in an edit form that is pre-populated with a value. I would like to give it the following behaviour:

• clicking inside the text field automatically selects the entire contents
• Clicking again inside the area deselects all the contents and places the cursor in the position where the user clicks

Here’s my code:

// HTML
<input type="text" class="clickToSelect" value="myText" />

// jQuery
$(".clickToSelect").click(function(){
    $(this).select();
})

Now when the user clicks the field, all the text is selected but when they click a second time all the text is still selected. Any ideas how I can deselect the text on the second click and place the cursor?

Answer 1

something like this?

    $(".clickToSelect").click(function(){
        if(!$(this).hasClass("click-selectall")){
           $(this).addClass("click-selectall");
           $(this).select();
        }
    });

   $(".clickToSelect").blur(function(){
        $(this).removeClass("click-selectall");
    })