Usage
- Include the patternlock.js file in your page
- include the patternlock.css file in your page (and upload the images)
- give the input element you want to replace the class "patternlock"
Parametersit 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 <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 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.