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.
This seemingly easy script however was not available as a jQuery plugin, and the only script we could find online used regular Javascript to add a “show password” option to login forms.
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
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.
To use the plugin, is as simple as jQuery is to Javascript. All you need to do is add an ID to your password input:
<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:
$(document).ready(function(){
$('#showpassword').showPassword();
});
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.
$('#showpassword').showPassword(element, options);
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.
$('#showpassword').showPassword('.checker', {
text: 'Custom Show Password Text',
className: 'mycustomclass',
name: 'showmypass'
});
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.
Update: 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.
Update 2: 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.
Liked this post? Help spread the word by sharing it!
Tags: configurator, jquery, Morph, password, plugins, usability
Hi there, nice Plugin. I have read the Jakob Nielsen Post too. We have developed a litte jquery Plugin depending on that Post too. myPass – password hiding iPhone-Style. Maybe a Multiple Plugin with yours and our options would be nice.
http://www.mysrc.de/allgemein/jquery-mypass-password-hiding-iphone-style/
Oliver Storm´s last blog ..jQuery myPass – password hiding iPhone-Style
Hi , I am trying to implement the jQuery (jquery.myPass-1.0.js) in my asp.net page. When i am trying to log in ,it cannot retrieve any value. Am i missing something?
Hi Shakira,
You’re probably more likely to get a response from the developer if you contact him directly on his site, as not everyone chooses to subscribe to these comments.
As per Oliver’s comment above yours, the link to his site and the details of the plugin are:
http://www.mysrc.de/allgemein/jquery-mypass-password-hiding-iphone-style/
Hope that helps and good luck!
Cheers,
Chris
Chris´s last blog ..New preview of the Creativa themelet – Typography
Hi Oliver,
the mobile functionality is something I have already started working on adding. Essentially the masking of the letter a second after keypress.
Nice plugin by the way. Looks very fancy
thanks for your comment!
What about multiple password fields, e.g. Password & Password Confirmation?
Gerhard´s last blog ..Conditional RJS
Hi Gerhard,
Sorry it has taken me so long to reply.
Are you referring to having password masking on multiple fields, if so, then all you would need to do is call the function on each element.
$(’#el1′).showPassword(class, options);
$(’#el2′).showPassword(class, options);
In version 1.1 the plugin will be able to have multiple elements set as well as a rewrite of the options.
Here it is another reaction on JN Alertbox about password fields. It’s on my blog:
http://tribune.majlab.com/code_examples/mask_password.html
It works standalone, without Jquery or similar JS library.
Stevan Majstorović´s last blog ..Polja za password – nova reakcija
Stevan,
Thanks for pointing that out, it is a great implementation and small too, which is great. The reason however that I chose to code it for jQuery was because of the lack of any plugin and also the ability to extend on the plugin.
Nice code though.
Nice usability plugin. When I thought of this functionality, I would just switch the input type between ‘text’ and ‘password’. Is there a specific reason why you chose to add a hidden input element and toggle visibility?
Hi Gotwic,
Thanks for the feedback and comments.
The main reason was that adding a hidden input on page load was much faster in testing than doing a split and join and jQuery’s attr function does not switch the types as you would expect it to, well at least not in my testing.
Thanks again for the comment.
Thanks for this great plugin!
>> Version 1.1 will be released next week
I’m not sure when “Update2″ was made, so is there a particular date when you’re targeting the 1.1 release? Is it already available somewhere?
Thanks again!
Hi James,
We haven’t had much of a chance to spend on revising the plugin, as all our focus is currently going into getting the stable release of our new Joomla! template framework, Morph out the door.
That said, we have a some nice updates planned for when things calm down a bit
Cheers,
Chris
Is there any way I can chain these together so that I can show 3 password input boxes using a single check box? The use case being a password change form.
Best regards, Ben.
Hi Ben,
The current version doesn’t support targeting multiple inputs, but we’ll definitely keep that in mind for future updates.
Cheers,
Chris
Chris´s last blog ..10+ Joomla, Web Development and Business blog posts of the week