Example for jQuery: show plain text in a password field and then make it a regular password field on focus - Part 2

This is a complete working example for the post here: jQuery: show plain text in a password field and then make it a regular password field on focus - Part 2

HTML/Javascript Source

This the complete source for the above example:

<!DOCTYPE html> 
<html>
<head>
<script language="javascript" src="/js/jquery-1.4.1.min.js"></script>
 
<script language="Javascript">
 
$(document).ready(function() {
 
    // cache references to the input elements into variables
    var passwordField = $('input[name=password]');
    var emailField = $('input[name=email]');
    // get the default value for the email address field
    var emailFieldDefault = emailField.val();
 
    // add a password placeholder field to the html
    passwordField.after('<input id="passwordPlaceholder" type="text" value="Password" autocomplete="off" />');
    var passwordPlaceholder = $('#passwordPlaceholder');
 
    // show the placeholder with the prompt text and hide the actual password field
    passwordPlaceholder.show();
    passwordField.hide();

    // when focus is placed on the placeholder hide the placeholder and show the actual password field
    passwordPlaceholder.focus(function() {
        passwordPlaceholder.hide();
        passwordField.show();
        passwordField.focus();
    });
    // and vice versa: hide the actual password field if no password has yet been entered
    passwordField.blur(function() {
        if(passwordField.val() == '') {
            passwordPlaceholder.show();
            passwordField.hide();
        }
    });
 
    // when focus goes to and moves away from the email field, reset it to blank or restore the default depending if a value is entered
    emailField.focus(function() {
        if(emailField.val() == emailFieldDefault) {
            emailField.val('');
        }
    });
    emailField.blur(function() {
        if(emailField.val() == '') {
            emailField.val(emailFieldDefault);
        }
    });
 
});
 
</script>
 
</head>
<body>
 
<form>
    <input type="text" name="email" value="Email Address" />
    <input type="password" name="password" value="" autocomplete="off" />
</form>

</body>
</html>