Question

我有这样的结构：

<div> <a href='#'>Hyperlink</a> </div>
<div>
  <table>
    <tr>
      <td>Row1</td>
      <td><button>Click</button></td>
    </tr>
    <tr>
      <td>Row2</td>
      <td><button>Click</button></td>
    </tr>
    <tr>
      <td>Row3</td>
      <td><button>Click</button></td>
    </tr>
  </table>
</div>

我无法使用标签导航到按钮，但在shift +标签上，他们正在获得焦点并且可以访问。每个HTML元素都使用了很多类，但没有使用tabindex。

可能是什么问题？请帮忙。

Answer 1

查看HTML中的全局tabindex属性。

http://www.w3schools.com/tags/att_global_tabindex.asp

tabindex="n"

您可以为元素指定应该选中的序列，这很可能会解决您现在遇到的任何标签焦点问题。

Answer 2

你必须为元素定义tabindex并使用一点jQuery

＆＃13;

$(function(){
  $('#anchor').click(function(){
    $(this).html('Pres Tab now');
  });
});

＆＃13;

.hidden{
  position:absolute;
  top:-100px;
}
input{
  width:0px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<a href='#' id="anchor" tabindex="1">Click me</a>
</div>
<div>
<table>
<tr>
  <td>Row1</td><td><button tabindex="2">Click</button></td>
</tr>
<tr>
  <td>Row2</td><td><button tabindex="3">Click</button></td>
</tr>
<tr>
  <td>Row3</td><td><button tabindex="4">Click</button></td>
</tr>
</table>
  <div class="hidden"><input type="text" tabindex="5" onfocus="$('#anchor').focus()" /></div>
</div>

＆＃13;

Answer 3

旋转标签顺序需要一个虚拟输入它是否处于隐藏模式

＆＃13;

$(function(){
  $('#anchor').click(function(){
    $(this).html('Check Tab now');
  });
});

＆＃13;

.hidden{
  position:absolute;
  top:-100px;
}
input{
  width:0px;
}
a{
text-decoration:none;
  color:#ff8800;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<a href='#' id="anchor" tabindex="1">Click me</a>
</div>
<div>
<table>
<tr>
  <td>Row1</td><td><button tabindex="2">Click</button></td>
</tr>
<tr>
  <td>Row2</td><td><button tabindex="3">Click</button></td>
</tr>
<tr>
  <td>Row3</td><td><button tabindex="4">Click</button></td>
</tr>
</table>
  <div class="hidden"><input type="text" tabindex="5" onfocus="$('#anchor').focus()" /></div>
</div>

＆＃13;

HTML元素无法在焦点上获得焦点但在shift + tab上可以访问

3 个答案: