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
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!
Features and Compatibility
- Written in MooTools. Requires -Core version 1.2.4 + and -More 188.8.131.52 +
- 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").
'masked' password field.
- Supports copy & paste.
- 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
- interval Time in milliseconds PassShark checks for newly entered characters.
- duration Delay in milliseconds for the last inputted character.
- 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.
- 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 Notesv1.0 released: November 14th, 2009.
Full source code can be found on GitHub: http://github.com/Rendez/PassShark
LicensePassShark is released under the Open Source MIT license
PublishedNovember 14th, 2009 at 23:46
AuthorLuis Merino aka Rendez
in Barcelona & Mallorca
Tagged withiPhone3 MooTools2
- Graphic Design
- iPhone + Objective C
- Bits and Pieces
- Tips and Tricks
- Apple 12
- OS X 4
- Agavi 3
- Snow Leopard 3
- iPhone 3
- MooTools 2
- Web Standards 2
- Graphic Design 2
- Interface Design 2
- Web Design 2
- Typography 2
- Steve Jobs 2
- Certificate 1
- Pink Floyd 1
- Security 1
- NeXT 1
- Team 1
- E-mail 1
- Homage 1
- CinemaZone 1
- WebKit 1
- Jony Ive 1
- Safari 1
- Tim Cook 1
- The Crazy One 1
- Steve Wozniak 1
- App Store 1
- Design 1
- iOS 1
- Grapher 1
- IKEA 1
- Partners 1
- Graphing Calculator 1
- Print 1
- Projects 1
- Ron Avitzur 1
- Bitextender 1
- Python 1
- User Interface 1
- Identity 1
- iTunes 1
- Encryption 1
- TextMate 1