Question

我在这里遇到了tabindex问题。正如您在HTML模拟中看到的那样，我有四个按钮，即“添加”，“减去”，“保存”和“关闭”。当用户点击Tab键时，流程从 Add-＆gt;正确启动Subtract-＆GT; Save-＆GT;关闭，但在关闭后如果用户再次点击Tab键，焦点将转到 TD TAG，注释“Jumping Here”。我想要它做的是转到添加按钮。我尝试给所有按钮提供 1,2,3,4 的tabindex然后我尝试给每个按钮指数 1 ，其余的地方为 -1 ，但这也没有解决问题。我该如何解决这个问题？

http://jsfiddle.net/t3ch/aNxjy/

Answer 1

很确定这是不可能的。仅仅因为你有一个带有tabindex值的表单，并不意味着那些是唯一可以获得焦点的元素。甚至浏览器组件（如地址栏）也会在某些时候获得焦点。浏览器将使用您指定的tabindex，但之后标签将循环显示其他所有内容。

Answer 2

我不喜欢这个想法，但是你可以实现这一点的方法是为关闭按钮注册onblur事件，然后将焦点设置为你想要的控制权......

这确实有用....

function resetFocusIndex(){
   var obj = document.getElementsByName('addIt');
   if(obj[0])
      obj[0].focus();
}


<INPUT TYPE="button" tabindex = "1" VALUE="Close" NAME="closeIt" onblur="resetFocusIndex()">

<强>更新

<html>
   <head>
   <script>

   function resetFocusIndex(){
      var obj = document.getElementsByName('addIt');
      if(obj){
        obj[0].focus();
      }
   }

   </script>
   </head>
   <body> 
   <TABLE WIDTH=95%>
      <TR>
        <TD><INPUT TYPE="button" tabindex = "1" id="test2" VALUE="Add" NAME="addIt"></TD>
        <TD><INPUT TYPE="button" tabindex = "1" VALUE="Subtract" NAME="minusIt"></TD>
        <TD> </TD>
      </TR>
   </TABLE>

   <DIV>
     <TABLE BORDER="1" CELLSPACING="0" CELLPADDING="1">
      <TD> </TD>
      <TD>First</TD>
      <TD>Second</TD>
      <TD>Third</TD>
      <TD>Fourth</TD>
      <TR>
    <!-- Jumping Here -->  <TD><INPUT TYPE="radio" NAME="selected" tabindex = "-1" VALUE=""></TD>     
     <TD><INPUT TYPE="text" tabindex="-1" NAME="" VALUE="" disabled></TD>
     <TD ></TD>
     <TD><INPUT TYPE="text" tabindex="-1" NAME="" VALUE="" disabled> </TD>
     <TD><INPUT TYPE="text" tabindex="-1" NAME="" VALUE="" disabled> </TD>

       <INPUT TYPE="hidden" NAME="" VALUE="">
       <INPUT TYPE="hidden" NAME="" VALUE=""></TD>
   </TR>
  </TABLE>
</DIV>

<TABLE>
  <TR>
    <TD><A HREF="#" tabindex="-1">Click Here!</A></TD>
  </TR>
  <TR><TD>&nbsp;</TD></TR>
  <TR>
   <TD>
     <INPUT TYPE="button" tabindex = "1" VALUE="Save" NAME="saveIt">
     <INPUT TYPE="button" tabindex = "1" VALUE="Close" id="test" NAME="closeIt" onblur="resetFocusIndex()">
   </TD>
  </TR>
</TABLE>

</body>

</html>

Answer 3

不要这样做，这是一个糟糕的主意。

具有可聚焦项目（例如input）在第一个按钮之前和最后一个按钮之后。隐藏它们（例如，使用position: absolute; left: -1000px;将它们放在页面的一侧）。当他们获得焦点事件时，将焦点移动到Tab键顺序另一端的按钮。

不要这样做，这是一个糟糕的主意。真。

Answer 4

首先你需要'id'用于按钮，这总是很好。

然后你需要设置两个处理程序;一个在最后一个选项卡到第一个，一个在第一个按钮shif + tab到最后一个。

请参阅：http://jsfiddle.net/aNxjy/11/。

我使用了jquery，但你也可以使用常规的js来实现这一点。只是你必须做跨浏览器兼容性。

Answer 5

除了gmcalab的答案而不是getElementsByName，你可以使用getElementById

var obj = document.getElementById('test2');
if(obj){
    obj.focus();
}

或可能：

var obj = document.getElementById('test2');
if(obj){
    obj.select();
}

HTML tabindex问题

5 个答案: