# jQuery Autotab Demo

Autotab's full documentation can be found in ReadMe.md on GitHub.

Angular and Knockout demos are also available.

Note: For the purposes of this demo, I am calling `$.autotab({ tabOnSelect: true });` to initialize the auto tabbing order.

Use the buttons below to turn Autotab on or off. Turning Autotab off will remove both auto tabbing and filtering.

Autotab status: On
X
Phone Number - -

    $('.number').autotab('filter', 'number');

X
Text characters only - -

    $('.text').autotab('filter', 'text');

X
Alpha only - - - -

    $('.alpha').autotab('filter', 'alpha');

X
Uppercase letters and numbers - - - -

    $('.alphanumeric').autotab('filter', { format: 'alphanumeric', uppercase: true });

X
Regular Expression (Allows numbers and periods)

    $('#regex').autotab({ format: 'custom', pattern: '[^0-9\.]' });

X
Custom function that forces a number range of 1 to 12

    $('#function').autotab(function (value, element) {
        var parsedValue = parseInt(value, 10);

        if (!value || parsedValue != value) {
            return '';
        }

        var newValue = element.value + value;

        if (newValue > 12) {
            $.autotab.next();
            return 2;
        }
        else if (element.value.length == 0 && value > 1) {
            $.autotab.next();
            return value;
        }
        else if (element.value.length == 1 && parsedValue === 0 && newValue != 10) {
            $.autotab.next();
            return 1;
        }

        return value;
    });

X
Hexadecimal (Allows numbers, a-f, and A-F) : : : : : : :

    $('.hexadecimal').autotab('filter', 'hexadecimal');

X
Numbers only with support for auto tabbing on periods . . .

    $('.ip').autotab('filter', { format: 'number', trigger: '.' });

X
Filtering and auto tabbing on password fields .

    $('.pin').autotab('filter', 'number');

X
Any and all characters with tabbing support on non-text form fields. Textarea will auto tab when the defined `maxlength` is reached, disabled fields are skipped entirely, and the select list will auto tab when a value is selected. Auto tabbing on select lists only applies for single select and is configurable using `tabOnSelect`.
Email:
Number:
Tel:
Range:
URL:

    // Note: This call is not necessary as 'all' is the default format
    $('.all').autotab('filter', 'all');