Home | About Chris Hope | Contact Chris Hope | Search:

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

Posted March 30th, 2010 in Javascript

Almost a year ago I showed how to have a password field show plain text with a default plain-text value but then be an actual password field when the user clicks into it, implementing this with jQuery. Just recently someone asked in the comments on that page how to do the same thing if you cannot modify the HTML itself, so show how to do that in this post.

Previous Posts

The techniques discussed here have been covered in earlier posts as follows:

• Changing the default text value on focus with jQuery
• Show plain text in a password field and then make it a regular password field on focus Part 1
• Changing the default text value on focus and showing plain text in a password field (full example)
• The above example in action

Doing it all in Javascript

The way I did this in the earlier post was to have an additional input field which was hidden with CSS and then toggling between the two when focus goes on to and off of the password/input field. If the HTML template cannot be modified then a minor modification needs to be done by dynamically adding the additional form field with jQuery.

The example I will use here has a very basic HTML form which contains no id attribute for the input elements and just a name attribute instead, as this is commonly all that will be present in a form:

<form>
    <input type="text" name="email" value="Email Address" />
    <input type="password" name="password" value="" autocomplete="off" />
</form>

The following chunk of Javascript adds the necessary additional field and then sets up all the blur/focus rules to make everything work. I have added a Javascript comment before each section of code explaining what each bit does. That plus the notes from my previous posts is all that should be needed.

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

Working Example

Click here to view a full working example with the full source.

Comments

blog comments powered by Disqus