• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
The Electric Toolbox Blog

The Electric Toolbox Blog

Linux, Apache, Nginx, MySQL, Javascript and PHP articles

  • Applications
  • FCKEditor
  • Apache
  • Windows
  • Contact Us
Home / jQuery: show plain text in a password field and then make it a regular password field on focus – Part 2

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

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.

Check Out These Related posts:

  1. Show and hide an element with jQuery
  2. jQuery: show plain text in a password field and then make it a regular password field on focus
  3. jQuery: Changing the default text value on focus, and showing plain text in a password field Part 1
  4. Toggling a password field between plain text and password

Filed Under: Javascript

Primary Sidebar

Categories

  • Apache
  • Applications
  • Article
  • Case Studies
  • Email Servers
  • FCKEditor
  • HTML And CSS
  • Javascript
  • Linux/Unix/BSD
  • Microsoft SQL Server
  • Miscellaneous Postings
  • MySql
  • Networking
  • Nginx Web Server
  • Offsite Articles
  • OSX
  • PHP
  • Quick Tips
  • RFC – Request for Comments
  • SilverStripe
  • VMWare
  • VPN
  • Windows
  • WordPress

Recent Posts

  • Vim Show Line Numbers
  • Add User To Group Linux
  • Chmod 777 Tutorial
  • How to Copy Directory Linux
  • Linux create user

Copyright © 2021. ElectricToolBox. All Rights Reserved.

  • Contact Us
  • Copyright Info
  • Privacy Policy
  • Sitemap