arvindandrion.com

Here’s what happened to us with my buddy Aftab. I had designed the form like this.

The inputs have the values of username and password. Just by looking at it you will think that all we have do in the code is like this

<input name="username" value="username" value="username" />
<input name="password" value="password" value="password"/>

Yes that’s true, but only in the username input will show the word and the password inputs will show dots.

I tried to use jquery .val() in the password but I’m still having the same result. So I came across facebook login and see how they’re doing this trick. And that’s the time I call aftab and we checked on firebug.

You have to open firebug to see the magic. On default, the input password it’s like this

<input name="password" type="text" value="Password" />

Once you clicked, the input will changing to

<input name="password" type="password" />

You can achieve this using jquery on .focus(). Here’s the code.

CSS:

#rlPass{
    display:none;
}

HTML

<input id="loginPass" type="text" value="Password"  />
<input id="rlPass" type="password" />

JQUERY

$(document).ready(function() {
    $("#loginPass").focus(function(){
        $(this).hide();
        $("#rlPass").css("display", "inline");
    });
})