JSFiddle - React, Tailwind, and code Playground

HTML

<input type="text" value="password" id="password" style="color:#aaaaaa;">

JavaScript

jQuery( document ).ready( function(){

    jQuery( document ).delegate( "#password", "focusin focusout",
        function(e){
        var elm = jQuery( "#password" )[0];
            if( e.type == "focusin" && elm.type == "text" ) {
            jQuery( elm ).replaceWith( jQuery( "<input>", {id: "password", type:"password", value:"" } ) );
            jQuery( "#password")[0].focus();
            }
            else if( e.type =="focusout" && elm.type == "password" && !elm.value ) {
                jQuery( elm ).replaceWith( jQuery( "<input>", {id: "password", style: "color:#aaaaaa;", type:"text", value:"password" } ) );
            }
        
        }
    );
});