Show password – Show or mask password checkbox Jquery plugin
‘Show password’ is a small and simple Jquery plugin that let your users decide whether they want their password fields masked or not.
“Usability suffers when users type in passwords and the only feedback they get is a row of bullets. Typically, masking passwords doesn’t even increase security, but it does cost you business due to login failures.” – Jacob Nielsen, Stop password masking.
This Jquery plugin, ‘Show password’, let the user decide whether they want their passwords masked or not. Just take a look at the demo beneath and you’ll see what I mean.
How to implement
Very simple! First you download, then you do like this:
<input id="text" type="password" /> <input id="checkbox" type="checkbox" /><label>Show password</label>
Two html elements are needed; a password field and a checkbox. Then you add the javascript below and change #text and #checkbox to the names of your input IDs.
$('#text').showPassword('#checkbox');
Comments
Make a comment
Projects
- Accordion (jQuery)
- Airport (jQuery)
- Defaultvalue (jQuery)
- Elastic (jQuery)
- Highlight (jQuery)
- Keycan
- Lazy (jQuery)
- Limit (jQuery)
- Password Strength (jQuery)
- Show Password (jQuery)
- Tabify (jQuery)
- Valid8 (jQuery)
Latest posts
- July 8th, 2009 Why are we typing passwords twice?
- July 5th, 2009 Don’t stop password masking; let the user decide
- June 1st, 2009 You can’t validate email addresses with regular expressions
- May 20th, 2009 Konami Code: Why so verbose, when you can make it in 140 characters?
- May 18th, 2009 Let your users know if Firebug slows down your web page.
Your code seems like a really hard way to toggle between type=’text’ and type=’password’. Did you try that first, and found it didn’t work?
You can’t change type of an input in IE6 and IE7. So creating a clone is more or less the only way to go.
Hi Jan.
I like the idea of the plugin, however the checkbox should be added with jQuery itself to be unobtrusive to users with javascript disabled.
[...] Show password – Show or mask password checkbox Jquery plugin | Unwrongest – [...]
@ Kristoffer
You make a good point about unobtrusiveness. However, adding the checkbox in JavaScript means the design has to reside therein. A better solution would be to have the checkbox input have a class that hides it using a method that keeps screen readers from viewing it (you have to be careful about precisely how you go about this). When show-password is called on it, it would remove this class.
This should prove better for a general purpose application, at least.
Good point. Luckily, according to http://css-discuss.incutio.com/?page=ScreenreaderVisibility most screen readers understand the display: none; part of css, so it should be safe to do it this way.
[...] Show password links: Demo | Tutorial [...]
I dont like it. It didn’t work..
Hi
I installed this alongside the popular JQuery Validation plugin and now I get repeated validation errors on my password field, “required field” appears twice. Do you know why this could be? Would love to get it figured out.
Dan
I add some tweaks to this plugin for compatibility with validation. Now it works find and my validation is triggered properly. I will submit my change to Jan. Hope he will share it. I also tweak it to work both ways, if you preferred to start with a password field or text field. Depending of the input type, the opposite will be generated.
Basically for validation compatibility, you need to add:
1. A name attribute to ‘clone’ in createClone() – Required by validation on all form field. You can use something like: ‘name’:el.attr(‘name’)+’-[txt|pwd]
2. In $clone.keyup function add, for keyup event validation: $this.trigger(‘keyup’);
3. Finally, just before the set(); line, for blur event validation, add: $clone.blur(function() { $this.trigger(‘focusout’); });
This work find for me ;)
Michel
This is a great script, just with one tiny modification; After clicking the checkbox focus() on the field.