scriptwelt.org das JavaScript Archiv

Navigation
Startseite
Audio & Sound
Formulare
Cookies
Fenster & Frame
Grafik & Text
Navigation
Suche Scripts
Fun und Spiele
Buttons
Diverse
Tutorials

Kontakt
eine Mail an ScriptWelt.org
Webhosting
Tipps zur Providerwahl und zum Webspace

JavaScript in eine HTML Datei einbinden

Sind JavaScripts sicher?

Links zum Thema JavaSript

Impressum
impressum

Formulare JavaScript / Auto-TAB in Formularen

Mit diesem JavaScript können Sie eine Auto-Tab Funktion in Ihre Formulare integrieren. Soll nun eine Telefonnummer, Seriennummer oder ähnliches eingegeben werden, springt der Maus- Curser nach Eingabe der definierten Zahlenanzahl in das nächste Formfeld. Versuchen Sie die beiden Beispiel.
Autor: unbekannt

Telefon Nummer :
( ) -

Seriennummer :
- -

in <head> zufügen

<script type="text/javascript">
/* http://www.scriptwelt.org */
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;
}
</script>

in <body> einfügen

<form>
Telefon Nummer : <br>
(
<input onKeyUp="return autoTab(this, 3, event);" size="4" maxlength="3"> ) -
<input onKeyUp="return autoTab(this, 6, event);" size="7" maxlength="6">
<br><br>
Seriennummer : <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>