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

Phone Number - -

// 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.

Social Security Number - -

$('.ssn').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 });

Any and all characters - - - -

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

Regular Expression (Allows numbers and periods)

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

Custom Function (Range of 1-12, even if the second digit is greater than 2)

$('#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: '.' });