2011-08-30 20 views
30

Si uso TAB en el teclado y luego el cursor pasa de 1 a 4 (1 → 2 → 3 → 4)Cómo omitir un elemento de formulario desde la navegación TAB?

¿Cómo puedo omitir el número 3? Me gustaría ir 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> 

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

+0

¿Desea que se pueda seleccionar (3) mediante el mouse pero no a través de la tecla Tab? ¿Qué pasa con las Flechas, o el acceso directo (que golpea el valor en el teclado)? – Pierre

Respuesta

55

si se establece el tabindex = "-1" en la entrada de la misma # 3, usted no será capaz de pestaña a # 3

1

dan la identificación de elementos, y escribir un script en estas líneas ...

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

¿Por qué configurarlo mediante script? No tiene sentido. – Tomalak

+0

el operador lo había etiquetado con javascript y jQuery, así que supuse que tenía que hacer lo mismo usando js ...... mi malo – jayanth

+0

Hm ... el OP lo ha etiquetado con todas las etiquetas imaginables. :) Pero sí, desde ese punto de vista la respuesta es válida.+1 – Tomalak

1

Si está usando está bien, puede intentar SkipOnTab.

SkipOnTab: Complemento jQuery para eximir los campos de formulario seleccionados del orden de tabulación de reenvío.

Simplemente agregue data-skip-on-tab="true" a los elementos (o contenedores) que desea omitir. Todavía puede hacer clic para enfocarlos o volver usando shift - pestaña.

En su 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> 

Ver the simple demo y the business case demo. También puede try the forked jsfiddle with SkipOnTab.

+0

Para el downvoter: construí el complemento para agregar funcionalidad (orden predecible, shift-tab), para no hacer exactamente lo mismo que HTML puro 'tabindex =" - 1 "'. Ver https://github.com/joelpurra/skipontab/wiki/SkipOnTab-versus-tabindex –

0

Suponiendo que hay una razón 3 necesita seguir tabbable (como una vista MVC donde el elemento es un control de entrada y necesita permanecer como parte del orden de tabulación, de lo contrario no enviará datos al controlador) , probablemente no podrá omitirlo en ambas direcciones, y si encuentra una forma, dependerá de un error que será parchado sin previo aviso para que el navegador vuelva a cumplir con las especificaciones W3 con respecto a la pestaña orden.

Para omitir en la dirección hacia adelante o hacia atrás (pero no ambos), agregue un controlador de eventos onfocusin() al elemento 3, que llama a focus() en el elemento inmediatamente siguiente o anterior. Si los eventos onfocus todavía podían pasar el control previamente enfocado en el parámetro event (como event.relatedTarget), se podía decir cuál era el elemento enfocado previamente, y transferir el control al elemento anterior si el foco venía del siguiente elemento. Sin embargo, la especificación W3 deja en claro que esto no es un comportamiento compatible, y los navegadores compatibles con HTML5 deben pasar null para event.relatedTarget, y hacer todo lo demás en sus capacidades para evitar que cualquier controlador de eventos focus() tenga acceso a la identidad del control previamente enfocado, anulando específicamente cualquier campo antes de llamar a un controlador de eventos focus() o blur() en el código del lado del cliente.

Cuestiones relacionadas