timmywil/password123

jQuery plugin. iPhone-style password fields!

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

Copyright (c) 2011 timmy willison,
Dual licensed under the MIT and GPL licenses.
http://timmywillison.com/licence/

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: "•",
	
		// 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");

password123's Issues

elem is undefined

When there is no input on the page: http://jsfiddle.net/pzeYZ/

Pass

Problem in IE9

Hello Sir,

I am using this awesome plugin for my project site

But i am having an issue with IE9 .

In my code i have a password and password confirm field .When i am typing something on the confirm password cursor is automaticaly jumping to the password field

Can u please check that ?

I am attaching a screencast of the issue also

http://screencast.com/t/wvn1rVOaRqI

Misses characters when keyed quickly

The easiest way to duplicate this is to go to the demo page and type in a password very quickly.

For example, test1234 (again, typed pretty fast) will appear to have capture 8 characters but actually only caught a subset of them.

Screenshot: http://wjay.us/FO3y

possible destroy method issue

Hi

Thank you very much for adding the "destroy" method. Much appreciated. Unfortunately I am having trouble making it work reliably. I can "switch on" password123, but when I come to switch it off by invoking the destroy function (in the manner specified in your docs, I believe) it generates an error in jQuery 1.4.4. (and 1.5 I think....)

The error is:
TypeError: Result of expression 'a' [undefined] is not an object.

I have a bare bones install that displays the issue here:
http://dl.dropbox.com/u/1340008/password123/index.html

Am I using it correctly? Is this a genuine error or am I just being particularly bone-headed today?

Help much appreciated - and once again, thank you for all the work you do on this plugin.

regards

Nick

destroy function

Hi

Love this plugin - works very well. Is it possible to "unbind" the plugin programmatically, then rebind it? I want to give users the option to switch it on and off, depending on whether they want its functionality in the environment they are in (i.e., in public they maybe don't want it...)

Is there a destroy function? If not, this would be a great thing to add...

kind regards

input size attribute lost when replacing fields

size attribute should be kept.
good job for this plugin anyway!

Error with jQuery 1.4.2

Webkit Error : "Uncaught TypeError: Cannot read property 'nodeType' of null" in jquery.js

From $.fn.password123 -> $.fn.textchange -> jQuery.fn.name -> jQuery.event.add [x]

Part of code :
$.fn['textchange'] = function (fn) {
return fn ? this.bind('textchange', fn) : this.trigger('textchange'); // -- Error triggered by "this.bind('textchange', fn)"
};