JSFiddle - React, Tailwind, and code Playground

by thundercracker

HTML

<input type="text" value="Password" id="faux-pwd" />
<input type="password" id="pwd" style="display: none" />

JavaScript

$(document).ready(function(){switchPass("faux-pwd", "pwd");});

//This is my standard password swapping function that is in my js library

function switchPass(falsePwd, pwd){
    var d = document;
    var fp = d.getElementById(falsePwd),
        p = d.getElementById(pwd);
    if( p && fp ){
        eventListener( (function(p, fp){
            return function(){
                fp.style.display = "none";
                p.style.display = "inline-block";
                p.focus();
                }
            })(p, fp), fp, 'focus');
        eventListener( (function(p, fp){
            return function(){
                if(p.value.length == 0){
                    p.style.display = "none";
                    fp.style.display = "inline-block";
                    }
                }
            })(p, fp), p, "blur");
        }
    }
                        
//These are dependicies becuase this is part of my code library

function eventListener(funct, obj, evt) {
    if(!document.all) obj.addEventListener(evt, funct, false);
    else obj.attachEvent("on"+evt, funct);}