你怎么做div“tabbable”？

I have buttons that are div elements and I want to make them so that it is possible for the user to press the tab key on their keyboard and move between them. I've tried wrapping their text in anchor tags but it doesn't seem to work.

我有div元素的按钮，我想制作它们，以便用户可以按下键盘上的Tab键并在它们之间移动。我试过将它们的文本包装在锚标签中，但它似乎不起作用。

Does anyone have a solution?

有没有人有办法解决吗？

3 个解决方案

#1

Add tabindex attributes to your div elements.

将tabindex属性添加到div元素。

Example:

例：

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

Per steveax's comment, if you don't want the tab order to deviate from where the element is in the page, set the tabindex to 0:

根据steveax的注释，如果您不希望Tab键顺序偏离元素在页面中的位置，请将tabindex设置为0：

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

#2

for those interested, in addition to the accepted answer, you can add the following jquery to make the div style change when you tab to it, and also handle Enter and Space to trigger a click (then your click handler will do the rest)

对于那些感兴趣的人，除了接受的答案之外，您可以添加以下jquery以在选项卡时更改div样式，还可以处理Enter和Space以触发单击（然后您的单击处理程序将执行其余操作）

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

I'm sure someone has made this into a jq plugin $().makeTabStop

我敢肯定有人把它变成了一个jq插件$（）。makeTabStop

#3

Add the tabindex="0"attribute to each div you want tabbable. Then use CSS pseudo classes :hover and :focus, for example to signify to the app user that the div is in focus and clickable, for example. Use JavaScript to handle the click.

将tabindex =“0”属性添加到您想要tabbable的每个div。然后使用CSS伪类：hover和：focus，例如，向应用程序用户表示div处于焦点和可点击状态。使用JavaScript来处理点击。

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>

#1