Ich habe Schaltflächen, die div-Elemente sind, und ich möchte sie so gestalten, dass der Benutzer die Tabulatortaste auf seiner Tastatur drücken und zwischen ihnen wechseln kann. Ich habe versucht, ihren Text in Ankertags zu verpacken, aber es scheint nicht zu funktionieren.

Hat jemand eine Lösung?

Fügen Sie tabindexIhren divElementen Attribute hinzu .

Beispiel:

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

Wenn Sie laut Steveax-Kommentar nicht möchten, dass die Tabulatorreihenfolge von der Position des Elements auf der Seite abweicht, setzen Sie Folgendes tabindexauf 0:

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

Für Interessenten können Sie zusätzlich zu der akzeptierten Antwort die folgende Abfrage hinzufügen, um den div-Stil zu ändern, wenn Sie darauf tippen, und auch Enter und Space verwenden, um einen Klick auszulösen (dann erledigt Ihr Klick-Handler den Rest).

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

Ich bin sicher, jemand hat dies zu einem JQ-Plugin $ () gemacht. MakeTabStop

Fügen Sie das tabindex="0"Attribut jedem Div hinzu, das Sie tabbable möchten. Verwenden Sie dann CSS-Pseudoklassen: hover und: focus, um dem App-Benutzer beispielsweise anzuzeigen, dass das div fokussiert und anklickbar ist. Verwenden Sie JavaScript, um den Klick zu verarbeiten.

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>

Machen Sie Elemente mit jquery per Tastendruck tabellierbar und klickbar

Annahmen

• Alle Elemente, die nicht tabellierbar und nicht anklickbar sind und anklickbar sein sollten, haben einen Klick Attribut (dies kann in eine Klasse oder ein anderes Attribut geändert werden).
• Alle Elemente sind vom gleichen Typ; Ich werde divs verwenden.
• Sie verwenden jquery

Beispiel HTML:

...

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

...

JQuery-Code: Dies ist der Code, der ausgeführt wird, wenn die Seite geladen wurde. Es muss auf Ihrer HTML-Seite ausgeführt werden.

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

Ein funktionierendes Beispiel finden Sie hier .