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][fiddle]

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

[![focus events][focus events]][focus events demo]

>**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][tab keyup]

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][jQuery one]. 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][animatedgif], 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**][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][once]:

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

### [Demo in fiddle][fiddle once]

[focus events]: http://i.imgur.com/JbU30dD.png
[focus events demo]: http://jsfiddle.net/KyleMit/ccf7S/3/

[fiddle]: http://jsfiddle.net/KyleMit/ccf7S
[fiddle once]: http://jsfiddle.net/KyleMit/ccf7S/17/

[tab keyup]: https://stackoverflow.com/a/18020246/1366033
[jQuery one]: https://stackoverflow.com/q/24589084/1366033

[animatedgif]: https://stackoverflow.com/a/22102081/1366033
[once]: https://stackoverflow.com/a/24589200/1366033

[event namespaces]: http://api.jquery.com/event.namespace/

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.

jquery input select all on focus

For those that still need to support IE, it's worth mentioning that you need an *entirely different* set of vendor styles to remove the '×' from Internet Explorer

Per the article [Remove the X from Internet Explorer and Chrome input type search][1]:


```css
/* clears the 'X' from Internet Explorer */
input.hide-clear[type=search]::-ms-clear,
input.hide-clear[type=search]::-ms-reveal {
  display: none;
  width: 0;
  height: 0; 
}

/* clears the 'X' from Chrome */
input.hide-clear[type="search"]::-webkit-search-decoration,
input.hide-clear[type="search"]::-webkit-search-cancel-button,
input.hide-clear[type="search"]::-webkit-search-results-button,
input.hide-clear[type="search"]::-webkit-search-results-decoration {
  display: none; 
}
```

### Demo in Stack Snippets & [jsFiddle][2]





    label, input {display: block; margin-bottom: 1rem;}

    /* clears the 'X' from Internet Explorer */
    input.hide-clear[type=search]::-ms-clear,
    input.hide-clear[type=search]::-ms-reveal {
      display: none;
      width: 0;
      height: 0; 
    }

    /* clears the 'X' from Chrome */
    input.hide-clear[type="search"]::-webkit-search-decoration,
    input.hide-clear[type="search"]::-webkit-search-cancel-button,
    input.hide-clear[type="search"]::-webkit-search-results-button,
    input.hide-clear[type="search"]::-webkit-search-results-decoration {
      display: none; 
    }



    <label >
      default
      <input type="search" value="query">  
    </label>


    <label >
      without x
      <input type="search" value="query" class="hide-clear" >  
    </label>




[1]: https://blog.maximerouiller.com/post/remove-the-x-from-internet-explorer-and-chrome-input-type-search/
[2]: https://jsfiddle.net/KyleMit/bhd7u81L/

By default, `<input type="search" />` renders like a "native" search field on Mac OS X (rounded corners, clear button, etc.). I want to completely remove this custom styling so that the input looks identical to an equivalent text input (`<input type="text" />`), but while keeping the input type set to `search`.

I've tried `-webkit-appearance: none;`, which gets it very close...but there's something funny going on with margins/padding that I can't seem to override, which causes the width of the search field to render ~20px shorter than a text input.

Is there another `-webkit-` specific property I'm not aware of to totally disable the styling?