Auto Tab Form Fields using JavaScript

An AutoTab is used to automatically set focus to the next form element when the maximum size of the current element has been reached. The user is spared from click in or tab to the next field. This thing can definitely provide a better experience to the user who is filling the form.

Below, we have created a list with some free JavaScript Auto Tabs, meant to help you in choosing a script that will improve the usability of your forms:

Cut & Paste Auto tab (form field) script from JavaScript Kit

Implementation
1. Insert the JS Code in the BODY section of your page:

<script>
/*
Auto tabbing script- By JavaScriptKit.com
http://www.javascriptkit.com
This credit MUST stay intact for use
*/

function autotab(original,destination) {
if (original.getAttribute && original.value.length == original.getAttribute("maxlength"))
destination.focus()
}
</script>

2. Insert the onKeyUp attribute for the field where the function will be called:

<input type="text" name="first" size=4 
onKeyup="autotab(this, document.form_name_here.second)" maxlength=3>

[Read more…]

Auto Tab from javascript.internet.com

Implementation
1. Include the following script in the HEAD section of your page:

<script type="text/javascript" src="autoTab.js"></script>

2. In the form:

<form>
Phone Number : 
<input onKeyUp="return autoTab(this, 3, event);" size="4" maxlength="3"> - 
<input onKeyUp="return autoTab(this, 3, event);" size="4" maxlength="3"> - 
<input onKeyUp="return autoTab(this, 4, event);" size="5" maxlength="4">
</form>

To get the JS file’s content go to this address then select ‘Source Code’.

[Read more…]

Auto-Tab by Matt Kruse

Implementation
1. Include the following script in the HEAD section of your page:

<script type="text/javascript" src="autotab.js"></script>

(click here to download the js file)
2. Form:

<form>
<input type=text name="Phone_1" size=3 maxlength=3 onKeyDown="TabNext(this,'down',3)" 
onKeyUp="TabNext(this,'up',3,this.form.Phone_2)">
-
<input type=text name="Phone_2" size=3 maxlength=3 onKeyDown="TabNext(this,'down',3)" 
onKeyUp="TabNext(this,'up',3,this.form.Phone_3)">
-
<input type=text name="Phone_3" size=4 maxlength=4>
</form>

[Read more…]

Autotab: jQuery auto-tabbing and filter plugin

Implementation
1. Include the necessary JQuery files:

<script type="text/javascript" src="latest-jquery-version.js"></script>
<script type="text/javascript" src="jquery.autotab.js"></script>

2. Add text fields including an ID:

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

3. Initialize autotab on the text fields with a ready() handler:

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

[Read more…]