Tôi có các nút là phần tử div và tôi muốn tạo chúng để người dùng có thể nhấn phím tab trên bàn phím của họ và di chuyển giữa chúng. Tôi đã thử gói văn bản của họ trong các thẻ neo nhưng có vẻ như nó không hoạt động.

Có ai có giải pháp không?

Thêm tabindexthuộc tính vào các divphần tử của bạn .

Thí dụ:

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

Mỗi lần bình luận steveax, nếu bạn không muốn thứ tự tab để đi chệch khỏi nơi nguyên tố này là trong trang, thiết lập tabindexđể 0:

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

đối với những người quan tâm, ngoài câu trả lời được chấp nhận, bạn có thể thêm câu lệnh sau để thực hiện thay đổi kiểu div khi bạn gắn tab vào nó, đồng thời xử lý Enter và Space để kích hoạt một nhấp chuột (sau đó trình xử lý nhấp chuột của bạn sẽ thực hiện phần còn lại)

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

Tôi chắc rằng ai đó đã tạo điều này thành một plugin jq $ (). MakeTabStop

Thêm tabindex="0"thuộc tính vào từng div mà bạn muốn có thể tab. Sau đó, sử dụng các lớp giả CSS: di chuột và: tiêu điểm, chẳng hạn để thông báo cho người dùng ứng dụng biết rằng div nằm trong tiêu điểm và có thể nhấp được. Sử dụng JavaScript để xử lý nhấp chuột.

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>

Làm cho các phần tử có thể lập bảng và có thể nhấp được bằng cách nhấn phím bằng jquery

Giả định

• Tất cả các phần tử thuộc loại không thể tab, không thể nhấp và phải có thể nhấp được đều có thuộc tính onclick (điều này có thể được thay đổi thành một lớp hoặc thuộc tính khác)
• Tất cả các phần tử đều thuộc cùng một loại; Tôi sẽ sử dụng div.
• Bạn đang sử dụng jquery

Html mẫu:

...

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

...

Mã truy vấn: Đây là mã sẽ chạy khi trang đã tải xong. Nó cần chạy trên trang HTML của bạn.

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

Bạn có thể tìm thấy một ví dụ làm việc ở đây .