New jQuery plugin targeting usability for password masking on forms
Last month, Jakob Nielsen wrote a blog post titled “Stop Password Masking” – a usability related article on how password masking on web forms, while providing a degree of “over the shoulder” security, is a step backwards regarding usability. Especially with the ever-apparent increase in the use of mobile devices to access online features.
While working on Configurator
, the backend UI for our new Template Management System, Morph
, we decided on including an option for users to show their password on the login form.
So I opted to write my own script, and offer it as a jQuery plugin – this satisfied all our criteria.
1. Keep to using the jQuery Framework for our TMS
2. Avoid the use of bloated code
3. Give back to the public and to jQuery
The plugin I wrote, when uncompressed, weighs in at around 2kb and compressed around 1kb. This is quite a drastic difference compared to the original script ) that we found online, which when compressed weighs around 4kb, and 12kb uncompressed.
My plugin also has a few customizable features which the original script lacks, namely:
- The ability to change the position of the checkbox
- Either directly after the password input, or
- In a specified element
- The ability to specify custom text for the checkbox as opposed to the standard “show password” text
- The ability to specify a class for the checkbox as well as a name attribute for usability
All of this and it only weighs in at 2kb uncompressed. Impressive, I know – anyway, lets get onto the point of this post.
The plugin aptly named showPassword
can be downloaded by clicking on the download link above. The download contains the demo, as well as the unpacked, and compressed versions of the plugin.
<input type="password" id="showpassword" name="password" />
And then invoking the plugin is as simple as adding the following in your head tag or external JS file:
That will give you the most basic option: A show password checkbox directly after the input. To customize, you can add the following 2 options to the call.
The element option allows you to inject the checkbox into any specified element, and the options object allows you to insert 3 additional options, “name”, “className” (for the checkbox, not the injected element) and custom text.
For example in the demo I have used a div with class of “checker” and I have specified custom text “Custom Show Password Text” and a custom name attribute “showmypassword” and for the purposes of the post, I have added the className call as well.
text: 'Custom Show Password Text',
As it goes with any web development of any type, I have tried my best to include as much as I can, and make it as usable and accessible as possible, but if you come across any problems, or have any extra ideas, please let me know in the comments.
An issue was found in Safari 4 due to their stricter JS parsing engine, and the plugin has been updated to reflect these changes. Please let me know if you find any other issues.
Another issue was found with the plugin – if you did not click the checkbox, strict browsers would not pass the data via POST as there were 2 inputs with the same name. This has been resolved and uploaded to the download and demo. Version 1.1 will be released next week, with a slight rewrite to how options are passed as well as a new feature as seen on mobile device forms.
Tags: configurator, jquery, Morph, password, plugins, usability