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 dialog.

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

** Feel free to download the Demo for local testing or inclusion in your App **

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.js"></script> <script type="text/javascript" charset="utf-8" src="Mootools-More.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 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:

• 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 can be found on GitHub: http://github.com/Rendez/PassShark

License

PassShark is released under the Open Source MIT license