jest sposób na użycie tabindex na tylko niektórych polach w formularzu HTML?

Question

Mam zestaw 8 złożonych formularzy (70 + pola) do przechowywania raportów zespołu. Sekcja formularza zawiera nazwy członków zespołu w tabeli o szerokości 4 kolumn i 2 wysokości (imię i nazwisko na górze i nazwisko poniżej). Kiedy użytkownik wypełnia formularz, klawisz tab przechodzi przez pierwsze imię, a następnie przechodzi do ostatnich nazw, ponieważ jest to kolejność w źródle (imiona w jednym TR i nazwiska w następnym TR). Oczywiście dla moich użytkowników byłoby łatwiej, gdyby klawisz tabulacyjny przeszedł od pierwszego do ostatniego nazwiska, a następnie do następnego imienia.

Wiem, że mogę to naprawić za pomocą tabindex, ale naprawdę nie chcę mieć tabindex wszystkich 500+ pól, tylko napraw te 4 pola.

Czy jest jakiś sposób, że mogę tabindex po prostu część formularza? Wypróbowałem to, ale nie przejdę do innych pól. Czy istnieje jakieś sprytne rozwiązanie JS? lub w jakiś sposób grupowania tych pól, tak aby domyślne tabulacje zaprowadziły mnie do grupy, a następnie mógłbym tam wejść tabindex?

Zadzwoń do mnie leniwy, jeśli chcesz .. ale staram się zaoszczędzić wiele godzin na wycinanie i wklejanie i popełnianie błędów.

Pozdrawiam!

Answer 1

Najlepszym wyjściem będzie podanie wszystkich danych wejściowych zanim nazwa wejdzie w ten sam parametr tabIndex, który jest o 1 mniejszy od pierwszego imienia, a następnie wszystkie dane wejściowe po wprowadzeniu nazwy będą takie same tabIndex która jest o 1 wyższa od danych wejściowych nazwiska.

<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> 
... 

myślę, że to, co masz zamiar do: http://jsfiddle.net/9ffWs/

Będzie on nadal wymaga, aby dodać tabIndex do każdego wejścia, ale przynajmniej jest to bardzo kontrolowane i powinno spowodować żadnych błędów.