javascript - bootstrap - tabindex="-1"



¿Puedo establecer dinámicamente tabindex en JavaScript? (2)

¿Hay algún atributo como tab-index?

CONTEXTO: Estoy haciendo que una sección de un formulario web sea visible o invisible según alguna condición en la que quiera establecer el índice de tabulación manualmente cuando esa sección en particular esté visible.

https://code.i-harness.com


Crear dinámicamente y restablecer tabIndex de elementos HTML.

El atributo tabindex especifica el orden de tabulación de un elemento HTML, como el conjunto de "li", "a", etc. El atributo tabindex es compatible con todos los navegadores principales.

Para esta instancia, configure set tabindex para los elementos de la lista "li". Por lo general, tabindex comenzará desde '0', sin embargo, podemos restablecerlo para comenzar desde '1'. Estoy usando Jquery para hacer esto.

Véalo trabajando aquí

<ul id="dfruits">
<li>Apple</li>
<li>Dragonfruit</li>
<li>Damson</li>
<li>Cloudberry</li>
<li>Blueberry</li>
<li>Cherry</li>
<li>Blackcurrant</li> 
<li>Coconut</li>
<li>Avocado</li>   
 <li>Pinaple</li>     
</ul>

$(document).ready(function() {

var 
SomeFruitsList=$("ul#dfruits li"),
//set tab index to starts from 1
tabindex = 0;   

SomeFruitsList.each(function() {
 // add tab index number to each list items
  tabindex++; 
$(this).attr("tabindex","TabIndex  " +tabindex); 

var tabIndex = $(this).attr("tabindex");
 // add tab index number to each list items as their title   
$(this).attr("title",tabIndex);

    $(this).append('<br/><em>My tabIndex is number:    '+tabIndex+'<em>')
})
    });

Usando JQuery podemos establecer el índice de pestañas de forma dinámica fácilmente Pruebe este código: configure el tabindex e incremente la variable

$(function() {
    var tabindex = 1;
    $('input,select').each(function() {
        if (this.type != "hidden") {
            var $input = $(this);
            $input.attr("tabindex", tabindex);
            tabindex++;
        }
    });
});




accessibility