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