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>