Showing text in a password field

A quick guide on how to show plain text in a password field and then make it a regular password field on focus.

JQuery:

$('#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();
}
});

Stylesheet:

input#password-clear {
display: none;
}

HTML:

<input id="password-clear" type="text" value="Password" autocomplete="off" />
<input id="password-password" type="password" name="password" value="" autocomplete="off" />
 

Information source: http://www.electrictoolbox.com/jquery-toggle-between-password-text-field/

About Keiron

Web Developer based in the UK. Click here if you want to work with me