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
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>