javascript - bootstrap - ¿Cómo repetir el tabindex desde 1 después de haber ido al último elemento con un tabindex?

tabindex="-1"

Question

Así, por ejemplo, aquí hay un script:

<!-- Random content above this comment -->
<input type="text" tabindex="1" />
<input type="text" tabindex="2" />
<input type="text" tabindex="3" />
<input type="text" tabindex="4" />
<input type="text" tabindex="5" />
<input type="text" tabindex="6" />
<!-- Nothing underneath this comment -->

Entonces, cuando el usuario presiona la pestaña y atraviesa los seis cuadros de texto, alcanza el último y luego presiona la pestaña, iría al contenido sobre el primer comentario, ¿verdad? Bueno, ¿cómo puedo hacer que comience desde tabindex="1" nuevo?

Answer 1

Aquí está mi solución, considerando que la primera entrada tiene establecido el atributo "autofocus":

Agregue esto después de su elemento de formulario (con HTML5 puede ser cualquier etiqueta):

<div tabindex="6" onFocus="document.querySelector(''[autofocus]'').focus()"></div>

Answer 2

Aquí mi solución donde no hace falta ningún otro elemento. Como se puede ver, los elementos estarán dentro de los elementos <form> .

$(''form'').each(function(){
    var list  = $(this).find(''*[tabindex]'').sort(function(a,b){ return a.tabIndex < b.tabIndex ? -1 : 1; }),
        first = list.first();
    list.last().on(''keydown'', function(e){
        if( e.keyCode === 9 ) {
            first.focus();
            return false;
        }
    });
});

Answer 3

Desafortunadamente, no puedes hacer eso sin javascript. Puede escuchar una tecla TAB (y asegurarse de que no sea MAYÚS + TAB ) presionando su último elemento y estableciendo manualmente el enfoque en su primer elemento dentro del controlador. Sin embargo, vincular esta lógica a los eventos del teclado (es decir, el método de entrada específico) no es universal y puede que no funcione cuando se usa:

• Un navegador movil
• Algún otro dispositivo de entretenimiento (televisión inteligente, consola de juegos, etc., por lo general usan un D-Pad para saltar entre elementos enfocados)
• Un servicio de accesibilidad.

Sugiero un enfoque más universal que es independiente de cómo se cambia el enfoque.

La idea es que rodee los elementos de su formulario (donde desea crear un " bucle de índice de índice ") con elementos especiales de "protección de enfoque" que también se pueden enfocar (tienen un índice de índice asignado). Aquí está su HTML modificado:

<p>Some sample <a href="#" tabindex="0">content</a> here...</p>
<p>Like, another <input type="text" value="input" /> element or a <button>button</button>...</p>

<!-- Random content above this comment -->
<!-- Special "focus guard" elements around your
if you manually set tabindex for your form elements, you should set tabindex for the focus guards as well -->
<div class="focusguard" id="focusguard-1" tabindex="1"></div>
<input id="firstInput" type="text" tabindex="2" class="autofocus" />
<input type="text" tabindex="3" />
<input type="text" tabindex="4" />
<input type="text" tabindex="5" />
<input type="text" tabindex="6" />
<input id="lastInput" type="text" tabindex="7" />
<!-- focus guard in the end of the form -->
<div class="focusguard" id="focusguard-2" tabindex="8"></div>
<!-- Nothing underneath this comment -->

Ahora solo escucha los eventos de focus en esos elementos de guardia y cambia manualmente el enfoque al campo apropiado (jQuery se usa por simplicidad):

$(''#focusguard-2'').on(''focus'', function() {
  // "last" focus guard got focus: set focus to the first field
  $(''#firstInput'').focus();
});

$(''#focusguard-1'').on(''focus'', function() {
  // "first" focus guard got focus: set focus to the last field
  $(''#lastInput'').focus();
});

Como puede ver, también me aseguré de que volvamos a la última entrada cuando el enfoque retrocede desde la primera entrada (por ejemplo, MAYÚS + TAB en la primera entrada). Ejemplo vivo

Tenga en cuenta que a los guardias de enfoque también se les asigna un valor de índice de tabulación para asegurarse de que estén enfocados inmediatamente antes / después de los campos de entrada. Si no establece manualmente tabindex en sus entradas, entonces ambos guardias de enfoque solo pueden tener tabindex="0" asignado.

Por supuesto, también puede hacer que todo esto funcione en un entorno dinámico, cuando su formulario se genera dinámicamente. Simplemente calcule sus elementos enfocados (tarea menos trivial) y rodéelos con los mismos guardias de enfoque.

Espero que eso ayude, avísame si tienes algún problema.

ACTUALIZAR

Como señaló nbro, la implementación anterior tiene el efecto no deseado de seleccionar el último elemento si uno presiona TAB después de que se cargue la página (ya que esto enfocaría el primer elemento #focusguard-1 que es #focusguard-1 , y eso #focusguard-1 el enfoque de la última entrada). Para mitigar eso, puede especificar qué elemento desea enfocar inicialmente y enfocarlo con otro pequeño fragmento de JavaScript:

$(function() { // can replace the onload function with any other even like showing of a dialog

  $(''.autofocus'').focus();
})

Con esto, simplemente configure la clase de autofocus en el elemento que desee y se centrará en la carga de la página (o cualquier otro evento que escuche).

Answer 4

Sí, después de tabular a través de las entradas, saltará sobre elementos adecuados que no tienen un orden de tabulación especificado. Pero también, después de tabular todos los elementos "tabbable", el foco saltará "fuera" del contenido de su página, a los elementos de la IU del navegador (pestañas, menús, marcadores, etc.)

Creo que la forma más sencilla es manejar el evento keyup en la última entrada e interceptar el uso de TAB (y MAYÚS + TAB )

Answer 5

Te sugeriría que incrementaras tu tabindex, es decir. > 100 y también proporcione el índice de tabulación a su div "contenedor" de contenido, tenga en cuenta que su contenedor de contenido debe tener un índice de tabulación menor que los cuadros de entrada para ex.99.

al presionar la pestaña en el último cuadro de entrada, establezca manualmente el foco en su división de contenido con javascript (puede usar los controladores de pulsación de tecla para la tecla de pestaña)

document.getElementById("content").focus();

debes darle un índice tabindex a tu "contenido" para enfocarlo.

Ahora, si presiona el tabulador, el enfoque cambiará automáticamente al primer cuadro de entrada.

Espero que esto ayude.

Gracias