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
- -
$('.number').autotab('filter', 'number');
X
- -
$('.text').autotab('filter', 'text');
X
- - - -
$('.alpha').autotab('filter', 'alpha');
X
- - - -
$('.alphanumeric').autotab('filter', { format: 'alphanumeric', uppercase: true });
X
$('#regex').autotab({ format: 'custom', pattern: '[^0-9\.]' });
X
$('#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').autotab('filter', 'hexadecimal');
X
. . .
$('.ip').autotab('filter', { format: 'number', trigger: '.' });
X
.
$('.pin').autotab('filter', 'number');
X







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