PassShark - iPhone style password masking using MooTools

PassShark.js is a free and easy-to-implement password masking class developed using MooTools.
Inspired and based on the excellent iPhone and iPod touch password dialogue.

This is our first officially released MooTools plugin, with many more already in development.
PassShark is a small component in a series of Form based plugins, specifically being created
for the next major release of Ether.Flex CMS, v2.

A brief history

Recently there has been a debate regarding password fields and usability. The main arguments centre
around two concepts: 1-Safety and 2-Accessibility of the presentation methods. If interested, please read
this blog post by Stefan Ullrich, the author of the jQuery plugin which inspired PassShark. His post is a
basic analysis in response to Stop Password Masking written by Jakob Nielsen.

To summarise, the goal with delayed password masking, is to help the user through a less painful way of
populating forms and specifically password fields. This methodology is fast becoming popular
on Mobile Devices, Desktop applications and the Web browser alike... We think this is a good thing!

The Demo

Features and Compatibility

• Written in MooTools. Requires -Core version 1.2.4 + and -More 1.2.4.2 +
• Tested on Safari 3+, Firefox 3+, Opera 10+, Internet Explorer 6 and 7.
• No need to modify your original HTML. The password field is automatically found by type (input type="password").
• Unobtrusive: users with Javascript deactivated still get the standard 'masked' password field.
• Supports copy & paste.

Usage

// 1_ Include MooTools-Core and MooTools-More* in your document head <script type="text/javascript" charset="utf-8" src="Mootools-Core_1.2.4.js"></script> <script type="text/javascript" charset="utf-8" src="Mootools-More_1.2.4.2.js"></script> // 2_ Include the PassShark script in your document head <script type="text/javascript" charset="utf-8" src="PassShark.js"></script> // 3_ Initialise PassShark, where 'sample_pass' is the id of your input, such as: id="sample_pass" <script type="text/javascript"> window.addEvent('domready', function(){ new PassShark('sample_pass',{ interval: 200, duration: 2000, replacement: '%u25CF', debug: false }); }); </script> // Dependencies: included is the complete MooTools-More* package, but you can download your own build.

Dependencies

• A full version of MooTools-Core (included, 70kb compressed) provides everything you'll need.
• From MooTools-More, the following components are required: Class.Occlude.js, Log.js, Class.Binds.js

Options

• interval Time in milliseconds PassShark checks for newly entered characters.
• duration Delay in milliseconds for the last inputted character.
• replacement The unicode symbol which replaces (masks) already inputted characters. Default is '%u25CF'.
  Note '%u....' prefix is needed in Javascript for utf-8 encoding.
• debug Displays actions in the console at runtime, to help debug your implementation. Default is 'false'.

Notes and Fixes

• The "onStateChange" event is commented so that the activate() and deactivate() methods,
  when implemented, can be executed with fireEvent() if needed.

PassShark with MooTools resolves many issues found in other implementations, specifically:

• Inability to use ' (apostrophe) characters.
• The cursor would move to the end on any key stroke, especially annoying if the cursor is elsewhere.
• When converting the last character-to-symbol with the a duration delay, the input field is focused,
  which is irritating if the input field is previously unfocused (blur).
• Errors on deletion of the original field value, which is highly unsafe.
• Deleting a multiple character selection would cause the same errors as stated above and others.
• Deleting a single character wouldn't work if the character was not the last one.

Release date, Source code and Notes

v1.0 released: November 14th, 2009.
Full source code, this README file and other Notes can be found on GitHub: http://github.com/Rendez/MooTools

License

PassShark is released under the Open Source MIT license