gibt es eine Möglichkeit, tabindex nur für einige Felder in einem HTML-Formular zu verwenden?

Question

Ich habe eine Reihe von 8 komplexen Formen (70+ Felder) zum Speichern von Teamberichten. Ein Abschnitt des Formulars enthält Teammitgliednamen in einer Tabelle 4 Spalten breit und 2 hoch (Vorname oben und Nachname unten). Wenn ein Benutzer das Formular ausfüllt, nimmt der Tab-Schlüssel sie über die Vornamen und geht dann zu den Nachnamen, weil dies die Reihenfolge ist, in der sie sich in der Quelle befinden (Vornamen in einem TR und Nachnamen im nächsten TR). Offensichtlich wäre es für meine Benutzer einfacher, wenn die Tab-Taste vom ersten zum letzten Namen und dann zum nächsten Vornamen wechselt.

Ich weiß, dass ich das mit Tabindex beheben kann, aber ich möchte wirklich nicht alle 500+ Felder Tabindex haben, nur so beheben Sie diese 4 Felder.

Gibt es eine Möglichkeit, tabindix nur Teil eines Formulars? Ich habe es versucht, aber es wird nicht zu den anderen Feldern wechseln. Gibt es eine clevere JS-Lösung? oder irgendeine Art, diese Felder zu gruppieren, so dass die Standard-Tabbing mich in die Gruppe aufnehmen würde, und dann könnte ich Tabindex darin geben?

Nennen Sie mich faul, wenn Sie wollen .. aber ich versuche, mir viele Stunden des Schneidens und Einfügens zu sparen und Fehler zu machen.

Prost!

Answer 1

Das Beste, was Sie tun können, ist alle Eingaben einzugeben, bevor der Name den gleichen tabIndex eingibt, der 1 kleiner ist als der Vorname, und dann alle Eingaben nach dem Namen gibt den gleichen tabIndex Das ist 1 höher als die Nachname-Eingabe.

<input type="text" tabIndex="1"><br> 
<input type="text" tabIndex="1"><br> 
... 
<table> 
    <tr> 
     <td><input type="text" tabIndex="2"></td> 
     <td><input type="text" tabIndex="4"></td> 
     <td><input type="text" tabIndex="6"></td> 
     <td><input type="text" tabIndex="8"></td> 
    </tr> 
    <tr> 
     <td><input type="text" tabIndex="3"></td> 
     <td><input type="text" tabIndex="5"></td> 
     <td><input type="text" tabIndex="7"></td> 
     <td><input type="text" tabIndex="9"></td> 
    </tr> 
</table> 
<input type="text" tabIndex="10"><br> 
<input type="text" tabIndex="10"><br> 
... 

Ich denke, das ist, was Sie wollen: http://jsfiddle.net/9ffWs/

Es wird Sie noch benötigen einen tabIndex auf jede Eingabe hinzufügen, aber zumindest ist es sehr kontrolliert und ohne Fehler zur Folge haben sollte.