Version: 1.5, Last updated: 2/1/2011

Demo - http://timmywillison.com/samples/password123/
Testing - http://timmywillison.com/samples/password123/qunit/test/
GitHub - http://github.com/timmywil/password123
Source - http://github.com/timmywil/password123/raw/master/jquery.password123.js (13.8kb)
(Minified) - http://github.com/timmywil/password123/raw/master/jquery.password123.min.js (5.2kb)

Sites Using password123

mailchimp.com

License

Support and Testing

Versions of jQuery and browsers this was tested on.

jQuery Versions - 1.3.2-1.5
Browsers Tested - Internet Explorer 6-8, Firefox 2-3.7, Safari 3-5,
Chrome 4-6, Opera 9.6-10.5.

Release History

1.5 - (2/1/2011) Added widget-style option method
1.4 - (2/1/2011) Restructured plugin, added destroy method, added tests
1.3 - (11/23/2010) Added Google Closure Compiler comments, common password field attribute
support when replacing fields, and no longer sends placeholder value when submitting the form.
1.2 - (9/28/2010) Placeholders changed to only work with HTML5 placeholder attribute,
'value' attribute now reserved for actual values
1.1 - (7/5/2010) Add Placeholder functionality
1.0 - (7/4/2010) Initial release

Usage

$('input:password').password123();

Placeholders

For placeholders, just use the HTML5 placeholder attribute:

<input type="password" placeholder="password">

This will work in all browsers and you can keep placeholders specific to certain elements.

Then assign styles to your placeholder class ('which you can change with options'):

.place {
		color: #999;
}

This allows for more flexibility than browser defaults, though most of the time you'll just want to have the placeholder be a lighter color.

Options

$('input:password').password123({
								
		// You can use any html character code or
		// plain text character
		character: "&#8226;",
	
		// This is the delay(ms) for when the last
		// character will change
		delay: 2000,
	
		// Use any prefix you like for the new
		// field ids, but they will always be zero-indexed
		prefix: "iField",
	
		// Enable the override of the placeholder attribute
		placeholder: true,
	
		// With this classname, you can set placeholder
		// specific styles in your own css
		placeholderClass: 'place',
	
		// When true, this will mask the placeholder or initial value
		maskInitial: false
		
});

Methods

Destroy

	var $input = $('input:password');
	$('#checkbox').change(function() {
		if (this.checked) {
			$input = $input.password123();
		} else { 
			$input = $input.password123("destroy");
		}
	});

Option (Getter/Setter)

	// Set
	$('#iField0').password123("option", "delay", 3000);
	$('#iField0').password123("option", "placeholder", false);
// Get
var prefix = $('#iField0').password123("option", "prefix");