Javascript Essentials Part 5

Auto Tab

This script is about auto tabbing in forms. As you type in one text input field and when required values have been put into the box, then cursor control will shift into next input box.

<html>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
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;
}
//  End -->
</script>
</HEAD>
<BODY>
<center>
<form>
<table>
<tr>
<td>Phone Number : <br>
1 - (
<small><input onKeyUp="return autoTab(this, 3, event);" size="4" maxlength="3"></small>) - 
<small><input onKeyUp="return autoTab(this, 3, event);" size="4" maxlength="3"></small> - 
<small><input onKeyUp="return autoTab(this, 4, event);" size="5" maxlength="4"></small>
</td>
</tr>
<tr>
<td>Social Security Number : <br>
<small><input onKeyUp="return autoTab(this, 3, event);" size="4" maxlength="3"></small> - 
<small><input onKeyUp="return autoTab(this, 2, event);" size="3" maxlength="2"></small> - 
<small><input onKeyUp="return autoTab(this, 4, event);" size="5" maxlength="4"></small>
</td>
</tr>
</table>
</form>
</center>
</body>
</html>

Leave a Reply

Your email address will not be published. Required fields are marked *