jQuery plugin: Show password checkbox

Overview of show password checkbox plugin

To help address the usability problems with password fields which obscure the password text itself (see Stop Password Masking by Jakob Nielsen), this jQuery plugin adds a “Show password” checkbox after selected password fields. When the “Show password” checkbox is clicked, the password field changes to a text field, revealing the password text. Unchecking the box obscures the password again.

Demo and explanation video (2 minutes)

This plugin clones the attributes of the password field to the new text field, ensuring that the unmasked password text field looks and behaves like the password field itself. It also keeps the values of both fields in sync so that you only have to process the value of the original password field itself. Following progressive enhancement, if Javascript doesn’t work, the original password field works as normal.

Inspired by “The Problem with Passwords” by Lyle Mullican at A List Apart, this plugin works like Example 1 from the article.

How to use the plugin

  1. Download at the plug-in page on jQuery’s website.
  2. Attach jQuery and this plugin script via script element. (Obviously…)
  3. Include a password input field in your markup. E.g., <input type="password" name="pw" id="pw" />
  4. In a document ready block, include a selector with the plugin for that password field. E.g., $("#pw").showPasswordCheckbox();. You can also use a selector for all password fields, like $("input[type=password]").showPasswordCheckbox();.

The download ZIP file includes an XHTML page used for testing during development. You can see an example of how to use the plugin in that file.

View other posts tagged with code.

3 thoughts on “jQuery plugin: Show password checkbox

  1. Max

    Great plugin! ana amazing implementation :) This will surely help usability on every site with registration form. Many times while writing password at the end I forget it )) Thanks!

  2. Thomas Schultz

    Hey! I put this in my IssueTracker project! I tried to vote you up on the Jquery plugin site but I signed up and I just get an “access denied” message from them. I can’t even view any plugins if I’m logged in.

  3. Pingback: jQuery: Passwörter in Formularen anzeigen « ebene7

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>