WP-Mix

Just a quick jQuery code snippet to toggle a password field. I used this technique for the license field of my premium WordPress firewall plugin, BBQ Pro. Sharing it here for reference and just in case I need to use it again.

JavaScript

Here is the jQuery part of the technique:

(function($) {
	$.toggleShowPassword = function(options) {
		var settings = $.extend({
			field:   '#password',
			control: '#toggle_show_password',
		}, options);
		
		var control = $(settings.control);
		var field   = $(settings.field)
		
		control.bind('click', function () {
			if (control.is(':checked')) {
				field.attr('type', 'text');
			} else {
				field.attr('type', 'password');
			}
		})
	};
}(jQuery));

Usage:

$.toggleShowPassword({
	field:   '.bbq_license',
	control: '.bbq_license_toggle'
});

HTML

And here is the associated markup:

<input class="bbq_license" name="bbq_license_key" type="hidden" value="Plugin License"> 
<input class="bbq_license_toggle" type="checkbox"> <span>Show password</span>

The best way to see how this works is to create a simple HTML file and add the JavaScript and HTML. Then go from there and customize as desired.