问题:

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.

Does anyone have a solution?

回答1:

Add tabindex attributes to you div elements.

Example:

First
 Second

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:

First
 Second

回答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)

$(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

回答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.

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

Click in this area first then press tab
 email
 facebook
 github
 google
 twitter

转载请标明出处:How do you make a div “tabbable”?

文章来源: How do you make a div “tabbable”?

标签

div