Lab - Don't Type!

DontType!

Javascript implementation of the Android password interface. Replaces conventional text inputs.

Description

A graphical interface for entering passwords using a grid - similar to the Android password input interface. Replaces regular passwords inputs with a simple drawing interface. Supports modern Browsers and touch devices like iphone and android.

Install

Simply include the dontType.js file in your page now you can call the plugin on any password field:

$('#passwordField').dontType();

Options

Additional Parameters which you can pass to customize the Plugin:

Make it a safer password

Provide your own conversion map to increase the password security. The map will be used to convert the points in the password hash.

convertMap : ['abd', 'ghc', '56d', 'tzr', 'löp', '789', 'frg', 'hzt', '999'];

Dimensions

width: 155,
height: 155,
padding: 25,
radius: 14

Colors

styles: {
        dotGradient: {
            from: 'rgba(49,49,49,0.95)',
            to: 'rgba(35,35,35,0.95)'
        },
        dotInner: 'rgb(255,255,255)',
        dotActiveInner: 'rgb(123,217,62)',
        dotActiveBorder: 'rgb(172,172,172)',
        lineColor: 'rgba(207,207,207,0.85)'
    }

Callbacks

NoSupport If the Browser dont supports the canvas Element, this Function will be called.

noSupport: function () {
    // for example include ExCanvas locally
    var s = document.createElement('script');
    s.src = 'excanvas.js';
    s.type = 'text/javascript';
    document.getElementsByTagName("head")[0].appendChild(s);
}