Come saltare un elemento del modulo dalla navigazione TAB?

Question

Se uso TAB sulla tastiera allora il cursore va da 1 a 4 (1 → 2 → 3 → 4)

Come posso skip numero 3? Mi piacerebbe andare a 1 → 2 → 4.

<table> 
    <tr><td> <input type="text" value="1"></td><td><input type="text" value="2"></td></tr> 
    <tr><td> <input type="text" value="3"></td><td><input type="text" value="4"></td></tr> 
</table> 

LIVE: http://jsfiddle.net/49Vca/

Answer 1

Se si imposta il tabindex = "-1" sull'ingresso stesso della # 3, non sarà in grado di scheda per # 3

Answer 2

dare un'occhiata a tabIndex proprietà

Answer 3

fornire gli elementi ID, e scrivere una sceneggiatura su queste linee ...

function changeTabIndex() 
    { 
    document.getElementById('1').tabIndex="1" 
    document.getElementById('2').tabIndex="2" 
    document.getElementById('3').tabIndex="-1" 
    document.getElementById('4').tabIndex="3" 
    } 
</script> 

Answer 4

Se l'utilizzo di jquery è ok, è possibile provare SkipOnTab.

SkipOnTab: Un plug-in jQuery per escludere campi modulo selezionati dall'ordine di tabulazione in avanti.

Basta aggiungere data-skip-on-tab="true" agli elementi (o contenitori) che si desidera saltare. È ancora possibile fare clic per mettere a fuoco o tornare indietro utilizzando shift - scheda.

Nel tuo caso:

<table> 
    <tr><td> <input type="text" value="1"></td><td><input type="text" value="2"></td></tr> 
    <tr><td> <input type="text" value="3" data-skip-on-tab="true"></td><td><input type="text" value="4"></td></tr> 
</table> 

Vedi the simple demo e the business case demo. Puoi anche try the forked jsfiddle with SkipOnTab.

Answer 5

Supponendo che ci sia un motivo 3 deve rimanere tabbable (come una vista MVC in cui l'elemento è un controllo di input e deve rimanere parte dell'ordine di tabulazione, altrimenti non invierà dati al controller) , probabilmente non sarai in grado di saltarlo in entrambe le direzioni e, se trovi una soluzione, dipenderà da un bug che verrà eliminato senza preavviso per ripristinare la conformità del browser con le specifiche W3 relative alla scheda ordine.

Per saltare in avanti o indietro (ma non entrambi!), Aggiungere un gestore di eventi onfocusin() all'elemento 3, che chiama focus() sull'elemento immediatamente successivo o precedente. Se gli eventi onfocus erano ancora autorizzati a passare il controllo precedentemente focalizzato nel parametro evento (come event.relatedTarget), si poteva dire quale fosse l'elemento precedentemente focalizzato e trasferire il controllo all'elemento precedente se lo stato attivo proviene dall'elemento successivo. Tuttavia, le specifiche W3 chiariscono che questo comportamento non è conforme e che i browser conformi a HTML5 devono passare null per event.relatedTarget e fare tutto il resto nelle loro capacità per impedire a qualsiasi gestore di eventi focus() di accedere al identità del controllo focalizzato in precedenza, annullando in particolare qualsiasi campo di questo tipo prima che un gestore di eventi focus() o blur() venga chiamato nel codice lato client.