jQuery: show plain text in a password field and then make it a regular password field on focus

My last Javascript post looked at how to change the default text value on focus with jQuery and this takes it a step further by showing how to have a password form field which shows "Password" and when the user clicks into it it then becomes a regular password field with obscured text.

Update December 10th 2015

You should really use placeholders these days instead of doing all this sort of mucking around; the only catch is there are still some people using older browsers (e.g. IE8 & IE9) which do not support placeholders. Take a look at my more up to date post which shows how to make placeholders work in older browsers.

Example

I’ll start with an example before I explain how this is done. In the following form there’s an email address and a field for the password. When you click into the email address field the text goes away and is only restored to the default on blur if it’s blank. The password field shows the text "Password" but when you click into it the password text goes away and any text you type is obscured like a regular password box.

If you are reading this is a feed reader then it won’t work so you’ll need to click through to this post in a web browser to try it out.

How it’s done

The type of field cannot be changed with Javascript from type="text" to type="password" so there are actually two fields for the password: a regular password field, and a second plain text field with the default "Password" value.

When the page is loaded the CSS makes the plain text field hidden. Then the jQuery makes the password field hidden and the plain text field visible. It’s best to do it this way so if Javascript is not enabled (or there’s a Javascript error which causes the rest of the script to stop running) then the user still has a regular password field with obscured text.

When the user clicks the plain text field, the jQuery code makes the plain text field hidden, the password field visible and puts focus on the password field. On blur, if the password field contains an empty value the plain text field is restored as the visible one to show the default value.

The HTML

<form>
<div>
    <input class="default-value" type="text" name="email" value="Email Address" />
</div>
<div>
    <input id="password-clear" type="text" value="Password" autocomplete="off" />
    <input id="password-password" type="password" name="password" value="" autocomplete="off" />
</div>
</form>

The CSS

#password-clear {
    display: none;
}

The jQuery

This would go in the $(document).ready initialization section, or in a function called from there:

$('#password-clear').show();
$('#password-password').hide();

$('#password-clear').focus(function() {
    $('#password-clear').hide();
    $('#password-password').show();
    $('#password-password').focus();
});
$('#password-password').blur(function() {
    if($('#password-password').val() == '') {
        $('#password-clear').show();
        $('#password-password').hide();
    }
});

Email address field

I haven’t posted the code for that field as I already covered this in an earlier post.

Full working example

I’ve followed these two posts up with a full working example which combines the two together, and has all the necessary source code all together.

Toggling a password field by changing the input type

It’s possible with regular Javascript to change an input’s type but it doesn’t work in IE versions less than 9, and jQuery prevents you from being able to do it for this reason. Read my follow up post "toggling a password field between plain text and password" for more information.