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.
Toggling a password field by changing the input type
It’s possible with regular Javascript to change an input’s type but it doesn’t work in IE versions less than 9, and jQuery prevents you from being able to do it for this reason. Read my follow up post "toggling a password field between plain text and password" for more information.