JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrap">
    <header>
        <h1>select() on form field focus</h1>
    </header>
    
    <section>
        <h2>Using "focus"</h2>
        <input value="Some" class="old"></input>
        <input value="text" class="old"></input>
        <input value="here" class="old"></input>
        <h2>Using "mouseup"</h2>
        <input value="Some" class="new"></input>
        <input value="text" class="new"></input>
        <input value="here" class="new"></input>
        <h2>Using combo of focus + mouseup.</h2>
        <input value="Some" class="newer"></input>
        <input value="text" class="newer"></input>
        <input value="here" class="newer"></input>
    </section>
    
    
    <footer>
        <p>This is a (edited) code example for the Stack Overflow question <br /><a href="http://stackoverflow.com/q/6124394/154877" target="_blank">"Select all text on focus using jQuery"</a>. Updated for jQuery 2.0.x<br>The original code is by <a href="http://stackoverflow.com/users/154877/marcel" target="_blank">Marcel</a>.</p>
    </footer>
</div>

CSS

body { color:#222; background:#fafafa; font:13px/1.4 'segoe ui', sans-serif; }
h1, h2 { margin:0 0 .5em; font:700 2.4em/1 'myriad pro', sans-serif; } h2 { color:#999; margin: 1em 0; font-size:1.6em; }
a { color:#06c; transition:.2s linear; -webkit-transition:.2s linear; } a:hover { color:#39f; }
p { margin:1em 0; } footer { color:#999; margin:3em 0 0; text-align:center; } footer a { color:#777; }
#wrap { width:500px; margin:1em auto; padding:1.5em; background:#fff; box-shadow:0 1em 2em rgba(0,0,0,.15); }

JavaScript

// Doesn't work as you want
$("input.old").on('focus', function() { $(this).select(); });

// Does what you want
$("input.new").on('mouseup', function() { $(this).select(); });

// Only selects when the form first gets focus.
$("input.newer").focus(function(){
    $("input.newer").mouseup(function(){
        $(this).select(function(){
            $(this).off("mouseup");
        });
        
        $(this).select();
    });
});