Puis-je définir dynamiquement le tabindex en JavaScript ?

Question

Existe-t-il un attribut comme tab-index ?

CONTEXTE : Je rends une section d'un formulaire web visible ou invisible en fonction de certaines conditions, et je veux définir manuellement l'index de l'onglet lorsque cette section particulière est visible.

Answer 1

document.getElementById("link3").tabIndex = 6;

Answer 2

Utilisation de JQuery nous pouvons définir l'index de l'onglet dynamiquement et facilement Essayez ce code - définissez le tabindex et incrémenter la variable

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

Answer 3

Réglage dynamique tabindex = "-1" pour readonly entrées

C'est une question intéressante ; plus Le support CSS est toujours non disponible .

Voici comment tabindex peut être réglé sur -1 pour tous readonly input éléments :

NodeList.prototype.forEach = NodeList.prototype.forEach || Array.prototype.forEach;

document.querySelectorAll('input[readonly="readonly"]').forEach(x => x.tabIndex = -1);

La première ligne garantit que le NodeList est étendue avec la classe forEach méthode. Cette méthode est expliqué plus en détail ici .

Answer 4

Crée et réinitialise dynamiquement le tabIndex d'un élément HTML.

L'attribut tabindex spécifie l'ordre de tabulation d'un élément HTML, tel que l'ensemble des "li", "a" e.t.c. L'attribut tabindex est pris en charge par tous les principaux navigateurs.

Dans cet exemple, nous allons définir l'indice de tabulation pour les éléments de la liste "li". Habituellement, l'indice de tabulation commence à '0', mais nous pouvons le réinitialiser pour qu'il commence à '1'. J'utilise Jquery pour faire cela.

Voir le fonctionnement ici

<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>')
})
    });

Answer 5

Quelques JS utiles :

for (let tabbable of document.querySelectorAll('[tabindex]')) {

}

element.setAttribute('tabindex', '-1');