web-dev-qa-db-fra.com

Puis-je définir dynamiquement tabindex en JavaScript?

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

CONTEXTE: je rend une section dans un formulaire Web visible ou invisible en fonction d'une condition où je veux définir manuellement l'onglet-index lorsque cette section particulière est visible.

javascripthtmlaccessibility
37
RVK
document.getElementById("link3").tabIndex = 6;
62
hunter

En utilisant JQuery, nous pouvons définir l'index des onglets facilement et dynamiquement Essayez ce code - définissez le tabindex et incrémentez la variable

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

Créez et réinitialisez dynamiquement tabIndex d'un élément HTML.

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

Pour cette instance, définissons tabindex pour les éléments de liste "li". Habituellement, tabindex démarre à partir de "0", mais nous pouvons le réinitialiser pour commencer à "1". J'utilise Jquery pour ce faire.

Voir ça fonctionne 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>')
})
    });
1
ShapCyber