Workstation JavaScript AutoTab + Filter

AutoTab Auto Filter Plugin

Javascript Include:

{function.javascript(#jquery.autotab.js#)}

CSS Include

not needed for this plugin

Required DOM Elements

requires a form inputs as defined when activating the plugin field

Why Autotab and not something else?

• Auto-tabbing behaves logically, in both tabbing forward and tabbing backwards.
• It allows you to easily change your text in a tab that would otherwise auto-tab away.
• It can filter text fields so that you can restrict a phone number to just numbers.
• It's small, fast, easy to load and built on the powerful jQuery library.

Recommended Usage

1. Add you text fields in your HTML, including an ID:

   <form><br>
   <div><strong>Phone Number:</strong></div><br>
   
   <input type="text" name="area_code" id="area_code" maxlength="3" size="3" /> -<br>
   <input type="text" name="number1" id="number1" maxlength="3" size="3" /> -<br>
   <input type="text" name="number2" id="number2" maxlength="4" size="5" /><br>
   </form>
   

2. Initialize Autotab on your text fields with a ready() handler:

   <script type="text/javascript"><br>
   $(function() {<br>
   	$('#area_code').autotab({ target: 'number1', format: 'numeric' });<br>
   	$('#number1').autotab({ target: 'number2', format: 'numeric', previous: 'area_code' });<br>
   	$('#number2').autotab({ previous: 'number1', format: 'numeric' });<br>
   });<br>
   
   </script>
   

Other Usage

Autotab allows a certain level of flexibility in how you initialize the auto-tabbing mechanism. Here is a modified version of the above example that will yield the same results:

<form><br>
<div><strong>Phone Number:</strong></div><br>
<input type="text" name="area_code" size="3" /> -<br>
<input type="text" name="number1" size="3" /> -<br>
<input type="text" name="number2" size="5" /><br>

</form>

<script type="text/javascript"><br>
$(function() {<br>
	$('input[name=area_code]').autotab({ target: 'number1', maxlength: 3, format: 'numeric' });<br>
	$('input[name=number1]').autotab({ target: 'number2', maxlength 3, format: 'numeric', previous: 'area_code' });<br>

	$('input[name=number2]').autotab({ previous: 'number1', maxlength 4, format: 'numeric' });<br>
});<br>
</script>

This example provides the benefit that you have less HTML, but the drawback is that you have to modify your selector and specify the maxlength of the field. Six here, half a dozen there; it comes down to preference.

Properties

format</dt>

The filtering method of the text field. Available filtering options are: text (anything but numbers), alpha, numeric, number (same as numeric), alphanumeric, and all (default).</dd>

maxlength</dt>

Determines the maximum number of characters allowed in a text field. Passing maxlength will override the hardcoded maxlength attribute in the HTML.</dd>

uppercase</dt>

Converts any text to uppercase.</dd>

lowercase</dt>

Converts any text to lowercase.</dd>

nospace</dt>

Removes any spaces.</dd>

target</dt>

The text field to auto-tab to when the maxlength has been reached on the current text field.</dd>

previous</dt>

The text field to auto-tab to when the Backspace key has been pressed in an empty text field. You can also press and hold Backspace to continue auto-tabbing in reverse.</dd>