jquery input select all on focus

I'm using this code to try and select all of the text in the field when a user focuses on the field. What happens is, it selects all for a second, then its unselected and the typing cursor is left where I clicked...

$("input[type=text]").focus(function() {
   $(this).select();
});

I want it all to remain selected.

Answer

July 5, 2014

KyleMit

After careful review, I propose this as a far cleaner solution within this thread:

$("input").focus(function(){
    $(this).on("click.a keyup.a", function(e){      
        $(this).off("click.a keyup.a").select();
    });
});

Demo in jsFiddle

The Problem:

Here's a little bit of explanation:

First, let's take a look at the order of events when you mouse or tab into a field.
We can log all the relevant events like this:

$("input").on("mousedown focus mouseup click blur keydown keypress keyup change",
              function(e) { console.log(e.type); });

Note: I've changed this solution to use click rather than mouseup as it happens later in the event pipeline and seemed to be causing some issues in firefox as per @Jocie's comment

Some browsers attempt to position the cursor during the mouseup or click events. This makes sense since you might want to start the caret in one position and drag over to highlight some text. It can't make a designation about the caret position until you have actually lifted the mouse. So functions that handle focus are fated to respond too early, leaving the browser to override your positioning.

But the rub is that we really do want to handle the focus event. It lets us know the first time that someone has entered the field. After that point, we don't want to continue to override user selection behavior.

The Solution:

Instead, within the focus event handler, we can quickly attach listeners for the click (click in) and keyup (tab in) events that are about to fire.

Note: The keyup of a tab event will actually fire in the new input field, not the previous one

We only want to fire the event once. We could use .one("click keyup), but this would call the event handler once for each event type. Instead, as soon as either mouseup or keyup is pressed we'll call our function. The first thing we'll do, is remove the handlers for both. That way it won't matter whether we tabbed or moused in. The function should execute exactly once.

Note: Most browsers naturally select all text during a tab event, but as animatedgif pointed out, we still want to handle the keyup event, otherwise the mouseup event will still be lingering around anytime we've tabbed in. We listen to both so we can turn off the listeners as soon as we've processed the selection.

Now, we can call select() after the browser has made its selection so we're sure to override the default behavior.

Finally, for extra protection, we can add event namespaces to the mouseup and keyup functions so the .off() method doesn't remove any other listeners that might be in play.

Tested in IE 10+, FF 28+, & Chrome 35+

Alternatively, if you want to extend jQuery with a function called once that will fire exactly once for any number of events:

$.fn.once = function (events, callback) {
    return this.each(function () {
        var myCallback = function (e) {
            callback.call(this, e);
            $(this).off(events, myCallback);
        };
        $(this).on(events, myCallback);
    });
};

Then you can simplify the code further like this:

$("input").focus(function(){
    $(this).once("click keyup", function(e){      
        $(this).select();
    });
});

Answer

Demo in jsFiddle

The Problem:

The Solution:

Demo in fiddle