Come si crea un div "tabbable"?

Question

devo tasti che sono elementi div e voglio fare in modo che sia possibile per l'utente di premere il tasto TAB sulla loro tastiera e spostarsi tra di loro. Ho provato a inserire il testo nei tag di ancoraggio, ma non sembra funzionare.

Qualcuno ha una soluzione?

Answer 1

Aggiungi tabindex attributi a voi div elementi.

Esempio:

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

Per il commento di steveax, se non si desidera che l'ordine di tabulazione di deviare dal punto in cui l'elemento è nella pagina, impostare il tabindex a 0:

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

Answer 2

per chi fosse interessato, oltre alla risposta accettata, è possibile aggiungere il seguente jquery per fare il cambiamento di stile div quando si scheda ad esso, e anche gestire Enter e lo spazio per innescare un clic (allora il vostro gestore click farà il resto)

$(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() 
}); 

Sono sicuro che qualcuno ha fatto questo in un JQ plugin di $(). MakeTabStop

Answer 3

Aggiungere l'attributo tabindex="0" ad ogni div che si desidera tabbable. Quindi usa le pseudo classi CSS: hover e: focus, ad esempio per indicare all'utente dell'app che il div è in focus e cliccabile, per esempio. Usa JavaScript per gestire il 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>