Saya memiliki tombol yang merupakan elemen div dan saya ingin membuatnya sehingga memungkinkan bagi pengguna untuk menekan tombol tab pada keyboard mereka dan berpindah di antaranya. Saya sudah mencoba membungkus teks mereka dalam tag jangkar tetapi sepertinya tidak berhasil.

Apakah ada yang punya solusi?

Tambahkan tabindexatribut ke divelemen Anda .

Contoh:

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

Menurut komentar steveax, jika Anda tidak ingin urutan tab menyimpang dari tempat elemen berada di halaman, setel tabindexke 0:

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

bagi mereka yang tertarik, selain jawaban yang diterima, Anda dapat menambahkan jquery berikut untuk mengubah gaya div saat Anda menekan tab, dan juga menangani Enter dan Spasi untuk memicu klik (maka handler klik Anda akan melakukan sisanya)

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

Saya yakin seseorang telah membuat ini menjadi plugin jq $ (). MakeTabStop

Tambahkan tabindex="0"atribut ke setiap div yang Anda inginkan tabbable. Kemudian gunakan kelas semu CSS: hover dan: focus, misalnya untuk menandakan kepada pengguna aplikasi bahwa div dalam fokus dan dapat diklik, misalnya. Gunakan JavaScript untuk menangani klik.

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>

Buat elemen menjadi tabbable dan dapat diklik dengan menekan tombol menggunakan jquery

Asumsi

• Semua elemen yang berjenis non-tabbable, non-clickable dan harus dapat diklik memiliki atribut onclick (ini dapat diubah ke kelas atau atribut lain)
• Semua elemen memiliki tipe yang sama; Saya akan menggunakan divs.
• Anda menggunakan jquery

Contoh html:

...

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

...

Kode jquery: Ini adalah kode yang akan dijalankan ketika halaman telah dimuat. Ini harus dijalankan di halaman HTML Anda.

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

Anda dapat menemukan contoh yang berfungsi di sini .