[html/javascript] Formular: Tab 'ausführen'

[himitsu]

Also ich hab hier mal 2 Varianten, die funktionieren.

Das 3. sollte aber das "Beste" sein - nur hab ich im Moment keine Lust/Zeit das komplett auszuarbeiten
Dort müßte z.B. 'ne Schleife rein, wo du alle Objekte durchsuchst und den Wert "tabIndex" mit "i" vergleichst - wenn gleich, dann hast du das gesuchte Objekt.

Code:

<script type="text/javascript">
<!--
  function weiter_1(o, z) {
    if (o.value.length == o.maxLength) {
      switch(z) {
        case 1:  document.Forumular_1.Feld_2.focus();  break;
        case 2:  document.Forumular_1.Feld_3.focus();  break;
        case 3:  document.Forumular_1.Feld_4.focus();  break;
        case 4:  document.Forumular_1.Button_1.focus();  break;
      }
    }
  }
//-->
</script>

<form name="Forumular_1" ...>
  <input name="Feld_1" type="text" size="5" maxlength="5" onkeypress="weiter_1(this, 1)">
  <input name="Feld_2" type="text" size="5" maxlength="5" onkeypress="weiter_1(this, 2)">
  <input name="Feld_3" type="text" size="5" maxlength="5" onkeypress="weiter_1(this, 3)">
  <input name="Feld_4" type="text" size="5" maxlength="5" onkeypress="weiter_1(this, 4)">
  <input name="Button_1" type="submit" value="Absenden">
</form>

[color=blue]*************************************[/color]

<script type="text/javascript">
<!--
  function weiter_2(o) {
    if (o.value.length == o.maxLength) {
      switch(o.tabIndex) {
        case 1:  document.Forumular_2.Feld_2.focus();  break;
        case 2:  document.Forumular_2.Feld_3.focus();  break;
        case 3:  document.Forumular_2.Feld_4.focus();  break;
        case 4:  document.Forumular_2.Button_1.focus();  break;
      }
    }
  }
//-->
</script>

<form name="Forumular_2" ...>
  <input name="Feld_1" type="text" size="5" maxlength="5" tabindex="1" onkeypress="weiter_2(this)">
  <input name="Feld_2" type="text" size="5" maxlength="5" tabindex="2" onkeypress="weiter_2(this)">
  <input name="Feld_3" type="text" size="5" maxlength="5" tabindex="3" onkeypress="weiter_2(this)">
  <input name="Feld_4" type="text" size="5" maxlength="5" tabindex="4" onkeypress="weiter_2(this)">
  <input name="Button_1" type="submit" value="Absenden" tabindex="5">
</form>

[color=blue]*************************************[/color]

<script type="text/javascript">
<!--
  function weiter_3(o) {
    if (o.value.length == o.maxLength) {
      i = o.tabIndex + 1;
      [color=red]// ***** das hier müsstest du aber noch erstetzen *****[/color]
      o2 = [suche objekt mit tabIndex = i];
      [color=red]// ****************************************************[/color]
      o2.focus();
    }
  }
//-->
</script>

<form name="Forumular_3" ...>
  <input name="Feld_1" type="text" size="5" maxlength="5" tabindex="1" onkeypress="weiter_3(this)">
  <input name="Feld_2" type="text" size="5" maxlength="5" tabindex="2" onkeypress="weiter_3(this)">
  <input name="Feld_3" type="text" size="5" maxlength="5" tabindex="3" onkeypress="weiter_3(this)">
  <input name="Feld_4" type="text" size="5" maxlength="5" tabindex="4" onkeypress="weiter_3(this)">
  <input name="Button_1" type="submit" value="Absenden" tabindex="5">
</form>

(zum Testen kannst'e das ja einfach mal in 'ner HTML-Datei abspeichern)