How to unhide passwords – on your site and everywhere else

Javascript disabled

You seem to have javascript disabled in your browser. You’ll need to enable it to use the examples in this post.

In his recent post Stop Password Masking Jacob Nielsen suggests to abandon the practice of masking passwords (i.e. showing ●●●● instead of regular text). Though I do agree with him for the biggest part, I think he’s absolutely wrong in proposing to make passwords readable by default.

In my opinion, the best solution would be to leave passwords hidden, but to provide the users with an easy way to toggle between the hidden and unhidden states. To help you do so, I have created three ready-to-use solutions for two scenario’s:

  1. You want to allow visitors of your site to toggle their passwords
  2. You are a visitor yourself and want to toggle passwords on every site on the internet

1. Allow your visitors to toggle their passwords

On your own site, you can add links saying “Show passwords” (or any other text) next to your password fields. Clicking one of these links toggles all passwords on the page. Try the example below:

To implement this, just put this togglePasswords.js file at the end of your <body> section. The script then adds a link next to each password field. You can easily change the link texts for showing and hiding, and each link gets a class pwToggler to allow easy styling. I’ve created an example page which shows the basic implementation.

2. Toggle passwords on every site on the internet

To let you toggle passwords easily everywhere else, I have created another two little tools: a bookmarklet and a Greasemonkey script.

Bookmarklet

Clicking this link [The bookmarklet should be here; if you see this text, you need to enable javascript in your browser] changes all password fields from bullets to text. (Clicking it again changes them back to bullets.)

To use the bookmarklet on other sites, simply drag the link into your bookmarks toolbar, or right-click it and select “Bookmark This Link”. (Internet Explorer won’t allow you to drag the link. Select “Add to Favorites…”, and confirm the warning message.)

(Note that the different toggling solutions do interfere with one another. Each one works only when you first it when the passwords are hidden.)

Greasemonkey script

If you’re using the Greasemonkey plugin for Firefox, install this Toggle Password userscript. Similar to what the javascript for on your own site does, this script adds links to toggle the passwords’ states. However, since you never know if there’s enough space next to the password fields, I have chosen to position these links over the password fields. Also I have shortened the link text to ● T. You can check this testing page before and after installing the script.

google login form with userscript

Google login with userscript

Download the example files

This .zip file contains all the examples from this post.

What do you think?

In the last few days since I have developed them, I have found these scripts quite useful. But what’s your opinion? Please let me know in the comments.

Share your thoughts

Fields marked with * are required

*
(will not be shown)
*