jQuery Autotab Demo

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

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