Jak zrobić div "tabbable"?

Question

Mam przyciski, które są elementami div i chcę je tak, aby użytkownik mógł nacisnąć klawisz tabulatora na klawiaturze i przechodzić między nimi. Próbowałem owijać ich tekst w znaczniki zakotwiczenia, ale to nie działa.

Czy ktoś ma rozwiązanie?

Answer 1

Dodaj atrybuty tabindex do elementów div.

Przykład:

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

Per komentarzu steveax, o ile nie chcesz kolejność tabulatora do odstąpienia od której element jest na stronie, ustaw tabIndex do 0:

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

Answer 2

dla zainteresowanych, oprócz zaakceptowanej odpowiedzi, możesz dodać następujący jquery, aby zmienić styl div, gdy się do niego połączysz, a także obsłużyć Enter i spację, aby wywołać kliknięcie (wtedy reszta obsługi kliknięć zajmie się resztą).

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

Jestem pewien, że ktoś dokonał tego w plugin JQ $(). MakeTabStop

Answer 3

Dodaj atrybut tabindex="0" aby każdy dział chcesz tabbable. Następnie użyj pseudo klas CSS: hover i: focus, na przykład, aby wskazać użytkownikowi aplikacji, że div jest na przykład fokusowany i klikalny. Użyj JavaScript, aby obsłużyć kliknięcie.

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>