jQuery Trick #3: Focus and Select issue in Chrome & Firefox

jQuery Trick #3: Focus and Select issue in Chrome & Firefox - http://jquerytipsntricks.wordpress.com/

HTML

<h1>Focus and Select issue in Chrome &amp; Firefox</h1>
<hr/>
<b>Steps to follow:-</b>
<ol>
    <li>This is <b>Version #1</b>.</li>
    <li>Open this demo in either Chrome or Firefox first.</li>
    <li>Next, click inside the textbox below to set the focus to it.</li>
    <li>You can see the issue now, that the whole text is not selected.</li>
    <li>You can click anywhere outside and again click inside the textbox.</li>
    <li>You will again see that it's really not working.</li>
    <li>Now, you can open the demo in any other browser.</li>
    <li>You will see that as soon as you click inside the textbox the whole text inside it is selected.</li>
</ol>
<br/>
<!-- This is our main HTML markup used in the demo -->
<input id='myInput' type="text" value="This is a sample text." />

CSS

/** Style for the body **/
 body {
    font: 12px Tahoma, Arial, Helvetica, Sans-Serif;
}
/** Style for the cointainer **/
 html, body {
    background-color:White;
}
hr {
    margin-bottom:30px;
}
/** Style for the input **/
 #myInput {
    display: inline-block;
    padding: 3px 1px 2px 4px;
    outline: none;
    color: #000;
    border: 1px solid #C8BFC4;
    border-radius: 4px;
    box-shadow: inset 1px 1px 2px #ddd8dc;
    background-color: #fff;
}

JavaScript

// Bind an event handler to the "focus" JavaScript event
$('#myInput').focus(function () {

    // Trigger the "select" JavaScript event
    $(this).select();
});