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.

If, for some reason, this page is not working or up to date with the latest Autotab, the most recent build can be found here.


Demo

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

Note: For the purposes of this demo, I am calling $.autotab({ tabOnSelect: true }); to initialize the auto tabbing order.

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

- -

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

Regular Expression (Allows numbers and periods)

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

Custom Function that forces a number range of 1 to 12

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

Any and all characters with tabbing support on non-text form fields. Textarea will auto tab when the defined maxlength is reached, disabled fields are skipped entirely, and the select list will auto tab when a value is selected. Auto tabbing on select lists only applies for single select and is configurable using tabOnSelect








Email:
Number:
Range:
URL:

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