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)
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
- Download at the plug-in page on jQuery’s website.
- Attach jQuery and this plugin script via script element. (Obviously…)
- Include a password input field in your markup. E.g.,
<input type="password" name="pw" id="pw" />
- 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
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.