jQuery Pattern Input Plug-in

jQuery plug-in to create input panel using Android Pattern Lock Style. This plug-in requires no dependency (apart from jQuery) and no image is used, just JavaScript and CSS.

See Live Demo here.

Browser Support

This plug-in uses HTML5 canvas, so sorry for IE6-8. Anyway this plug-in is targeted for using with touch devices which are mobile phones and tablets and most of them are HTML5 compatible so I didn't worry much about old versions of IE. This plug-in has been tested with

IE9, IE10
Chrome
Firefox

Usage Guide

To instantiate the input panel, you need an empty div as a placeholder

<div id="patternPanel" />

Then in JavaScript

$("#patternPanel").patternInput();

The code above will create an input panel with default settings, (3x3 dots and 300x300 pixels for Width and Height). To specify some options, you can do like below.

$("#patternPanel").patternInput({
    verticalDots: 4,
    horizontalDots: 4,
    width: 400,
    height: 400,
    autoClear: false
});

There are 2 events that you can listen to whcih are onChange and onFinish. onChange event will be fired at each dot that the finger (or mouse) dragged across. onFinish event will be fired at the time user lift the finger off the panel. To listen to these events, you have to pass callback functions at the creation option object along with the other options. Parameter of each event is the array of dot index sequence. Dot index sequence runs from left to right, top to bottom. The first index is 0.

$("#patternPanel").patternInput({
    onChange: function(value) {
        alert("Change: "+value.join(",");
    },
    onFinish: function(value) {
        alert("Finish: "+value.join(",");
    }
});

And finally, to call a method of this component.

//Clear the current input sequence
$("#patternPanel").patternInput("clear");

//Get the current input sequence
var sequence = $("#patternPanel").patternInput("getLastSequence");

Full list of options/events/methods can be seen in the API document section.

API Document

Possible Options

Here's the list of possible options that can be specified at the panel creation time.

autoClear : boolean

If autoClear=true, when user lift the finger off the screen, the finger trace will automatically be cleared immediately. If false, the trace will be remain and can be cleared using the method "clear"

width : number

The width of the panel. This will override the style set by the markup.

height : number

The height of the panel. This will override the style set by the markup.

border : number

The size of gap between the edge of the panel and the dots.

verticalDots : number

Number of dot columns.

horizontalDots : number

Number of dot rows.

dotSize : number

The size of the dots.

innerDotSize : number

The size of the small inner dots.

pathSize : number

The width of the finger trace.

pathColor : string

The color of the finger trace.

Events

Here's the list of possible events that the patternInput component fires.

onChange(value)

This event will be fired at each dot that the finger (or mouse) dragged across. value is the current input sequence.

onFinish

This event will be fired when user lift the finger off the panel (or mouse up). value is the current input sequence.

Methods

clear() : void

This method will clear the input sequence. Mostly use with option autoClear=false.

getLastSequence() : array

The method will return the last input sequence.