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.

• Download
• Demo

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”, “class” (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”.

$('#showpassword').showPassword('.checker', { text: 'Custom Show Password Text', 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.

Related posts:

1. Joomla plugin available for MailChimp MailChimp honestly makes our email marketing fun and easy and one of the reasons is tha
2. New extension: Slideshow module for Joomla Good things come to those who wait… The JoomlaJunkie SuperSlider module will be available for

Read original post at source site... http://www.prothemer.com/blog/2009/07/02/new-jquery-plugin-targeting-usability-for-password-masking-on-forms/