jQuery Autotab Demo


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

Autotab status: On

- -
// Example 1
$('input[type=text]').autotab();
$('.number').autotab('filter', 'number');

// Example 2
$('.number').autotab();
$('.number').autotab('filter', 'number');

// Example 3
$('#number1').autotab({ format: 'number', target: '#number2' });
$('#number2').autotab({ format: 'number', target: '#number3', previous: '#number1' });
$('#number3').autotab({ format: 'number', target: '#ssn1', previous: '#number2' });

// Example 4
// Note: Applies number formatting to all elements, but the last element lacks a target
$('.number').autotab({ format: 'number' });
$('#number3').autotab({ target: '#ssn1' });

Examples from this point on will assume $('input[type=text]').autotab() is called.


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

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

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

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

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

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

$('#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').autotab('filter', 'hexadecimal');

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