Auto Tab

JavaScriptSource Staff Apr 21, 2000

General

Automatically sets focus to the next form element when the current form element's maxlength has been reached. The user, then, does not have to manually click in or tab to the next field. Very easy to change for different size fields. Perfectly suited for constant-length strings such as a phone number or social security numbers.

Notes

Created by: Cyanide_7
Posted: April 21, 2000

Source Code

Paste this source code into the designated areas.

External file

Paste this code into an external JavaScript file named: autoTab.js

0
/* This script and many more are available free online at
The JavaScript Source!! http://www.javascriptsource.com
Created by: Cyanide_7 |  */
var isNN = (navigator.appName.indexOf("Netscape")!=-1);

function autoTab(input,len, e) {
  var keyCode = (isNN) ? e.which : e.keyCode; 
  var filter = (isNN) ? [0,8,9] : [0,8,9,16,17,18,37,38,39,40,46];
  if(input.value.length >= len && !containsElement(filter,keyCode)) {
    input.value = input.value.slice(0, len);
    input.form[(getIndex(input)+1) % input.form.length].focus();
  }

  function containsElement(arr, ele) {
    var found = false, index = 0;
    while(!found && index < arr.length)
    if(arr[index] == ele)
    found = true;
    else
    index++;
    return found;
  }

  function getIndex(input) {
    var index = -1, i = 0, found = false;
    while (i < input.form.length && index == -1)
    if (input.form[i] == input)index = i;
    else i++;
    return index;
  }
  return true;
}

Head

Paste this code into the HEAD section of your HTML document.


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

Body

Paste this code into the BODY section of your HTML document


<form>
Phone Number : <br>
1 - (
<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">
<br><br>
Social Security Number : <br>
<input onKeyUp="return autoTab(this, 3, event);" size="4" maxlength="3"> - 
<input onKeyUp="return autoTab(this, 2, event);" size="3" maxlength="2"> - 
<input onKeyUp="return autoTab(this, 4, event);" size="5" maxlength="4">
</form>

Leave a Response

(10 comments)

Well, that's just not the way not was created. It could always be adapted to do that.

Lee Oct 31, 2008

In order to better help you, you'll need to post your question [a href="http://www.webdeveloper.com/forum/forumdisplay.php?f=3"]over on the forums[/a].

Lee Jun 26, 2008

In order to better help you, you'll need to post your question [a href="http://www.webdeveloper.com/forum/forumdisplay.php?f=3"]over on the forums[/a].

Lee Jun 26, 2008

use:[br /][br /]input.form[(getIndex(input)+1) % input.form.length].select();[br /][br /]instead of[br /][br /]input.form[(getIndex(input)+1) % input.form.length].focus();

Bob Vila Jun 3, 2008

when moving to the next field, it does not set the focus to highlight the field, so that anything keyed adds to what is there instead of replacing it. And if that field is already full, you just jump to the next field.[br /][br /]It's a shame because the idea is really worthwhile

Reg May 16, 2008

Alphabetical Listing

Tutorials

Ajax Tutorials

Ajax

Buttons

Cookies

CSS

Forms

Games

Generators

Image Effects

Math Related

Miscellaneous

Multimedia

Navigation

Page Details

Password

Snippets

Text Effects

Time & Date

User Details