Question

So I have this very simple JS function that selects all the text in the ASP.NET texbox (input):

function selectAllText(textbox) {
    textbox.focus();
    textbox.select();
}

..and it gets called like this on the click event:

$("#<%=Textbox1.ClientID %>").click(function () { selectAllText(jQuery(this)) });

The problem is no matter how many times a user clicks in the text box all of the text is always selected. I understand why this is occuring (based on the way my code above is), but it doesn’t work well when the user tries to click in the middle of a word to get the cursor back to make a modification to the text.

How do I modify this JS to tell if the text is already highlighted and then deselect the text? This was on subsiquient click, the user can get the single cursor on a precise clicked location to make a modification.

I am trying to get the documentation on the .select() method to see if I could do if(!textbox.select()), but I am having a hard time finding it, so post any doc links as well if you have them.

EDIT: This problem and need for a workaround seems to be for IE (I am using IE9). In Chrome the behavior by default is what I need, but this is for an intranet application that runs on IE, so it appears I need an explicit workaround.

Thanks!

Answer 1

Is it necessary to do the .focus() in this function? You could instead attach a simple .select(); to the onfocus event (.bind('focus', function(){..})): http://jsfiddle.net/EGHzj/