c'è un modo per usare tabindex solo su alcuni campi in un modulo HTML?

Question

Ho un set di 8 forme complesse (oltre 70 campi) per l'archiviazione dei rapporti del team. Una sezione del modulo ha nomi di membri del team in una tabella di 4 colonne di larghezza e 2 di altezza (nome in alto e cognome in basso). Quando un utente compila il modulo, il tasto tab li fa passare attraverso i primi nomi, e poi passa al cognome, perché è l'ordine in cui si trovano nella fonte (primi nomi in un TR e cognomi nel prossimo TR). Ovviamente sarebbe più facile per i miei utenti se la chiave di tabulazione passasse dal primo al cognome e poi al prossimo nome.

So che posso risolvere il problema con tabindex, ma in realtà non voglio dover tabindex tutti i campi 500+, solo così risolvere questi 4 campi.

C'è un modo che posso tabindex solo una parte di un modulo? L'ho provato, ma non verrà aggiunto agli altri campi. C'è qualche soluzione JS intelligente? o un modo per raggruppare quei campi in modo che il tab di default mi portasse nel gruppo, e poi potrei inserire il tabindex lì dentro?

Chiamami pigro se vuoi .. ma sto cercando di salvarmi molte ore di tagliare, incollare e fare errori.

Cheers!

Answer 1

Il meglio che si possa fare è fornire tutti i propri input prima che il nome immetta lo stesso tabIndex, che è 1 in meno del primo nome immesso, quindi fornire tutti gli input dopo il nome immette lo stesso tabIndex che è 1 più alto dell'input del cognome.

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

Credo che questo è ciò che si sta andando per: http://jsfiddle.net/9ffWs/

Sarà ancora bisogno di aggiungere un tabIndex ad ogni ingresso, ma almeno è molto controllato e non deve tradursi in errori.