Javascript library: 9-dot Pattern Lock

You have probably seen this on a touchscreen smartphone: to unlock it,  instead of typing a password you are presented with 9 dots and you have to draw a pattern.
It works great: drawing a shape on a small touch screen is far easier than typing on those bl**dy small keyboards AND far easier to remember too.
Once you've got used to it, typing passwords in general gets pretty annoying: you want to swipe your way through every login screen you see.

For my own mobile web apps, I wanted to replace that standard password box with a familiar pattern lock, but was surprised I couldn't find one that was targeted towards web apps.
Maybe it does exist but i missed it?

Oh well, Do It Yourself! : my never ending mantra that I keep repeating over and over and over and over again :-)

Enter the 9-dot pattern lock javascript library.
It's pretty much drag-n-drop: just include the JS file and give your password box the class "patternlock" : It will be replaced with a nice touchy patternlock.
I wanted it to be free of any dependencies on frameworks like jQuery or Moo so it's completely standalone.

A live demo is at http://www.stef.be/dev/javascript/patternlock/

It's targeted towards large touchscreen devices such as Android phones/tablets, iPhone and IPad, but it works fine on any major desktop and mobile browser.

The idea is that each dot is a number from 1 to 9, when you draw a pattern, you're actually entering numbers into the password box.

It's free and open source, grab it here if you find it useful.

Parameters

• it has 2 parameters
  • patternlock.autoInit
    If set to true all input elements with the className "patternlock" will be replaced
    If set to false you have to manually initiate it by patternlock.generate(IDofElement)
  • patternlock.autoSubmit
    If set to true your form will be submitted when you stop drawing the pattern
    If set to false the user will have to submit it manually

Possible enhancements for the future:

• maybe rewrite it as a jQuery plugin ?
• it would be much cooler to use the HTML5 canvas element to draw the dots and lines in runtime instead of using images. But since that's not supported on all browsers, I used images to keep it compatible.

Known issues

• the default Android browser has a really slow "ontouchmove" trigger: if you draw very fast on your android phone, you will miss some dots. (I hate to admit it but the iOS browser clearly is the most potent mobile browser for touch stuff at the moment)
• If you draw outside of the box you can connect non-adjacent points. allthough that's perfecty fine, no lines will be drawn between those points.
• Using multiple patternlocks on the same page probably won't work.

If you bump into other issues or have any improvements: let me know!