Show Password 1.0
Created Wednesday 11th of March 2009 by Andreas Lagerkvist
Copyright © 2008 Andreas Lagerkvist (andreaslagerkvist.com)
Please have a look at the "Other Resources" for bug reports or further help on jQuery. Do not post bug reports or feature requests as comments to unrelated articles. If bug reporting on bugtracker.a-framework.org fails, e-mail me.
What it Does
This little plug inserts a "View password"-checkbox next to inputs of type password that allows the user to toggle the password's visibility. When the checkbox is checked the password is displayed in plain text.
How to Use
jQuery('#my-form').showPassword(); would insert "password togglers" in every input[type=password] within #my-form.
Example
Example Code
HTML
<div id="jquery-show-password-example">
<input type="password" value="oioioi"/>
</div>
JS
jQuery('#jquery-show-password-example').showPassword();
Source Code
jQuery.fn.showPassword = function (conf) {
var config = $.extend({
str: 'Show password',
className: 'password-toggler'
}, conf);
return this.each(function () {
jQuery('input[type=password]', this).each(function () {
var field = jQuery(this);
var fakeField = jQuery('<input type="text" class="' + config.className + '" value="' + field.val() + '" />').insertAfter(field).hide(); // only IE really needs this
var check = jQuery('<label class="' + config.className + '"><input type="checkbox" /> ' + config.str + '</label>');
var parentLabel = field.parents('label');
if (parentLabel.length) {
check.insertAfter(parentLabel);
}
else {
check.insertAfter(fakeField); // field
}
check.find('input').click(function() {
if (jQuery(this).is(':checked')) {
// field.attr('type', 'text'); // strange, this threw errors
// field[0].type = 'text'; // and this doesn't work in IE
field.hide();
fakeField.val(field.val()).show();
}
else {
// field.attr('type', 'password');
// field[0].type = 'password';
field.show();
fakeField.hide();
}
});
fakeField.change(function() {
field.val(fakeField.val());
});
});
});
};
