JSFiddle - React, Tailwind, and code Playground

HTML

<input type="text" id="hi" value="hithere">
<input type="button" id="btn" value="click to set next onfocus to password" />

JavaScript

var obj = {};

obj.textFade = function(id, password){
     if(password === 'undefined'){
         password = false;
     }
    document.getElementById(id).onfocus = function(){
        if(this.innerHTML == this.defaultValue){
            this.innerHTML = "";
        }
        else if(password == true){
            this.setAttribute('type','password');
        }
    };
    document.getElementById(id).onblur = function(){
        if( !this.value.length ) {
            this.value = this.defaultValue;
            if(password == true){
                this.setAttribute('type','password');
            }
        }
    };
};


document.getElementById('btn').onclick = function(){
    obj.textFade('hi',true);
};