Password Inputs, iPhone style with jQuery

DECAF came out with a jQuery plugin last year called ‘dPassword’ for replacing password fields with iPhone-style password fields.  However, I find the plugin deficient and buggy.  I certainly give them credit for taking a crack at it because this is not a trivial problem to solve.  Nevertheless, I find it a little amusing that the live demo on their page is broken.

And that was the best I could find.  So, I’m in the process of writing my own.  It’s not plugin style yet, but everything is functional.  

I handle sending the real password a little differently.  I replace the password input field with a hidden input to keep track of the real value.  This hidden input gets the same ID and name as the original so this is the one that will get sent with the form.  And of course I add the text field that you type in.  The text field has a custom ID for any styling that may need to be affixed and is given the same classes as the original password field; it will simply get ignored since it doesn’t have the right id or name.  I won’t go through all the magic of changing the values.

There is one known bug: you can’t delete a letter in the middle of the password and have it be represented correctly in the hidden input.  I can’t imagine anyone actually does that, but it should probably be able to do that.  That will be the next benchmark.

DECAF plugin: http://blog.decaf.de/2009/07/iphone-like-password-fields-using-jquery/.

My demo: http://timmywillison.com/samples/iphone_passwords/iphone_passwords.html.