Sandbox > jQuery Autotab Plugin

Autotab is a jQuery plugin that provides auto-tabbing and filtering on text fields in a form. Once the maximum number of characters has been reached within a defined text fields, the focus is automatically set to the defined target of the element. Likewise, clearing out the text field’s content by pressing backspace eventually places the focus on the elements previous target.

Why jQuery Autotab?

  • Auto tabbing behaves logically, in both tabbing forward and tabbing backwards.
  • Allow your users to easily modify your text in a tab that would otherwise auto tab away.
  • Reduce the amount of bad data submitted in a form by filtering text fields.
  • Populate multiple text fields by pasting into one.
  • Enhance text fields by auto tabbing when a specific character is pressed.
  • It is small, fast, easy to load and built on the powerful jQuery library.

Demo

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

Filtering and auto tabbing on password fields

.

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