JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://dwieeb.github.io/jquery-textrange/jquery-textrange.js"></script>
<ul>
    <li>
        <div class="psp-form-title fltLeft">User ID</div>
        <div class="fltLeft">
            <input type="text" value="" name="psp_user_id" id="psp_user_id" class="psp_user_id">
        </div>
        <div class="clear">&nbsp;</div>
    </li>
    <li>
        <br>
        <div class="psp-form-title fltLeft">Password</div>
        <div class="fltLeft" id="psp-pswd-container">
            <div id="navi">
                <input type="password" value="abcdef" name="account_password" id="account_password" class="search-txt-input">
            </div>
            <input type="text" value="abcdef" name="account-password-hide" id="account-password-hide" class="search-txt-input">
        </div>
        <div class="clear">&nbsp;</div>
    </li>
</ul>

CSS

#psp-pswd-container {
    width: 100px;
    height: 100px;
    position: relative;
}
#navi, #account-password-hide {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
#account-password-hide {
    z-index: 10;
    height: 14px;
    width: 133px;
    opacity: 0.001;
    filter: alpha(opacity=1);
    margin-top:2px;
    pointer-events: none;
}

JavaScript

$("#account_password").select(function () {
    console.log("moving selection to hidden field");
    var pos = $("#account_password").textrange();
    $('#account-password-hide').textrange('set', pos.start, pos.end);
    $('#account-password-hide').css("pointer-events", "auto");
});

function reset() {
    $('#account-password-hide').css("pointer-events", "none");
}
$('#account-password-hide').mousedown(function (evt) {
    // allow right clicks
    if (evt.which !== 3) {
        reset();
    }
});
$('#account-password-hide').mouseup(function () {
    reset();
});
$('#account-password-hide').blur(function () {
    reset();
});