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

Phone Number - -

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

Text characters only - -

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

Alpha only - - - -

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

Uppercase letters and numbers - - - -

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

Regular Expression (Allows numbers and periods)

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

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;
});

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

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

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

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

Filtering and auto tabbing on password fields .

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

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');