javascript - div - tabindex jquery

¿Cómo omito elementos al tabbrar sin usar tabindex?

Question

¿Hay una buena manera, en un controlador javascript onfocus (), de trampolín el enfoque al siguiente elemento en el orden de tabulación, sin tener que ingresar manualmente la ID del elemento que debería ser el siguiente?

Creé un selector de fecha HTML en Django / jQuery. Es una edición de línea seguida de un ícono de calendario que muestra un calendario. Quiero poder desplazarme de la edición de línea a la siguiente entrada, omitiendo el enlace para el icono de calendario. Quiero decir que es un widget generalizado, así que no puedo codificar el ID de lo que viene a continuación y llamar a .focus (). Sé que podría establecer atributos de tabindex en todo, pero eso es más manual de lo que me gustaría. Además, iirc, eso no evitaría que tome el foco, simplemente lo pondría al final del orden de tabulación.

Answer 1

Tal vez:

$("#your-calendar-icon").focus(function() {
  $(this).trigger("blur");
);

Answer 2

Use un div alrededor del icono de calendario en lugar de un enlace. Luego adjunte sus eventos de calendario a la div. Por defecto, el div no será una tabulación.

Answer 3

Verifique estos recursos:

• Obtener, configurar y eliminar valores de tabindex con JavaScript
• jQuery Tabindex Plugin

Answer 4

Establezca tabindex = "-1" para ese control y el navegador omitirá ese control de la tabulación.

Answer 5

Como dice @thetacom, puedes usar otro tipo de elemento, uno que no recibe foco. En caso de que aún desee mantener parte de la funcionalidad de la pestaña , puede probar SkipOnTab .

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

Simplemente agregue data-skip-on-tab="true" al icono selector de fecha (u otros elementos / contenedores) que desea omitir. Todavía puede hacer clic para activar el selector de fechas o volver usando la tecla Mayús y usar la tecla Intro.

Vea la demostración simple y la demostración del caso de negocios .

Answer 6

o:

$("#your-calendar-icon").focus(function() {
    $(somethingElse).trigger("focus");
});

Answer 7

Si siempre va a ser la entrada después del calendario, ¿por qué no?

$(''#your-calendar-icon'').focus( function() {
  $(this).next(''input'').focus();
} );

Personalmente, diría que si va a ser un complemento, simplemente debe hacer que el siguiente elemento sea una opción de configuración que tenga un valor predeterminado, y especifique el valor predeterminado en los documentos.