web-dev-qa-db-fra.com

Comment faites-vous un div "tabable"?

J'ai des boutons qui sont des éléments div et je veux les faire pour que l'utilisateur puisse appuyer sur la touche de tabulation de son clavier et se déplacer entre eux. J'ai essayé d'encapsuler leur texte dans des balises d'ancrage, mais cela ne semble pas fonctionner.

Quelqu'un a-t-il une solution?

htmlcssxhtml
78
TheBoss

Ajoutez des attributs tabindex à vos éléments div.

Exemple:

<div tabindex="1">First</div>
<div tabindex="2">Second</div>

Selon le commentaire de steveax, si vous ne voulez pas que l'ordre de tabulation s'écarte de l'emplacement de l'élément dans la page, définissez tabindex sur 0:

<div tabindex="0">First</div>
<div tabindex="0">Second</div>
102
Neps

pour ceux qui sont intéressés, en plus de la réponse acceptée, vous pouvez ajouter le jquery suivant pour faire changer le style div lorsque vous y tabulez, et également gérer Entrée et Espace pour déclencher un clic (votre gestionnaire de clic fera le reste)

$(document).on('focus', '.button',function(){
    $(this).css('border','1px dotted black')
});
$(document).on('keyup', '.button',function(e){
    if(e.which==13 || e.which==32)
        $(this).click()
});

Je suis sûr que quelqu'un en a fait un plugin jq $ (). MakeTabStop

5
AwokeKnowing

Ajouter le tabindex="0"attribuer à chaque div que vous voulez tabuler. Utilisez ensuite les pseudo-classes CSS: hover et: focus, par exemple pour signifier à l'utilisateur de l'application que le div est au point et cliquable, par exemple. Utilisez JavaScript pour gérer le clic.

var doc = document;
var providers = doc.getElementsByClassName("provider");

for (var i = 0; i < providers.length; i++) {
    providers[i].onclick = function() {
      console.log(this.innerHTML);
    };
}
.provider {
    flex: 0 1 auto;
    align-self: auto;
    width: 256px;
    height: 48px;
    margin-top: 12px;
    margin-right: 12px;
    text-align: center;
    line-height: 48px;
    
    text-transform: uppercase;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 10%;
    background-color: gray;
}

.provider:hover{
  cursor: pointer;
}

.provider:focus{
    -webkit-box-shadow: 0px 2px 8px 2px rgba(0,0,0,0.4);
    -moz-box-shadow: 0px 2px 8px 2px rgba(0,0,0,0.4);
    box-shadow: 0px 2px 8px 2px rgba(0,0,0,0.4);
}
<h4>Click in this area first then press tab</h4>
<div id="email" class="provider" tabindex="0">email</div>
<div id="facebook" class="provider" tabindex="0">facebook</div>
<div id="github" class="provider" tabindex="0">github</div>
<div id="google" class="provider" tabindex="0">google</div>
<div id="Twitter" class="provider" tabindex="0">Twitter</div>
2
Ron Royston

Rendre les éléments tabables et cliquables en appuyant sur les touches à l'aide de jquery

Hypothèses

  • Tous les éléments qui sont d'un type non tabable et non cliquable et qui devraient être cliquables ont un attribut onclick (cela pourrait être changé en une classe ou autre attribut)
  • Tous les éléments sont du même type; J'utiliserai des divs.
  • Vous utilisez jquery

Exemple html:

...

<div onclick="clicked(this)">Button 1</div>
<div onclick="clicked(this)">Button 2</div>
<div onclick="clicked(this)">Button 3</div>

...

Code Jquery: il s'agit du code qui s'exécutera une fois la page chargée. Il doit s'exécuter sur votre page HTML.

$(()=>{
    // make divs with an onclick attribute tabbable/clickable
    $('div[onclick]')
        .attr('tabindex', '0')                     // Add tab indexes
        .keypress((evt)=>{
            var key = evt.key;
            evt.preventDefault();                  // Ensure all default keypress
                                                   // actions are not used
            if (key === ' ' || key === 'Enter') {  // Only send click events for Space
                                                   // or Enter keys
                evt.currentTarget.click();         // Run the click event for element
            }
        });
});

Vous pouvez trouver un exemple de travail ici .

0
b_laoshi