Javascript 如何从1到最后一个包含tabindex的元素后重复tabindex？

例如，这里有一个脚本：

<!-- Random content above this comment -->
<input type="text" tabindex="1" />
<input type="text" tabindex="2" />
<input type="text" tabindex="3" />
<input type="text" tabindex="4" />
<input type="text" tabindex="5" />
<input type="text" tabindex="6" />
<!-- Nothing underneath this comment -->

---

所以，当用户按tab键，通过六个文本框，到达最后一个文本框，然后按tab键时，它会转到第一条评论上面的内容，对吗？那么，我如何让它再次从

tabindex=“1”

开始呢？

我建议您将tabindex增加到>100 并为“content”容器div提供tabIndex 请注意，对于ex.99，内容容器的tabindex必须小于输入框

当您在最后一个输入框上按tab键时，使用javascript手动设置内容div的焦点（您可以使用tab键的按键处理程序）

您必须为“内容”设置tabindex以设置焦点

现在，若你们按tab键，焦点将自动转移到第一个输入框

希望这会有所帮助

---

谢谢你

不幸的是，没有javascript你无法做到这一点。您可以在最后一个元素上按TAB键（并确保它不是SHIFT+TAB），然后手动将焦点设置为处理程序中的第一个元素。但是，将此逻辑绑定到键盘事件（即特定的输入法）不是通用的，在使用时可能不起作用：

• 移动浏览器
• 其他一些娱乐设备（智能电视、游戏机等——它们通常使用D-Pad在可聚焦元素之间跳跃）
• 无障碍服务

我建议采用一种更普遍的方法，不知道焦点是如何改变的

这样做的想法是，在表单元素（您希望在其中创建一个“tabindex循环”）周围使用特殊的“focus guard”元素，这些元素也是可聚焦的（它们指定了一个tabindex）。这是您修改的HTML：

<p>Some sample <a href="#" tabindex="0">content</a> here...</p>
<p>Like, another <input type="text" value="input" /> element or a <button>button</button>...</p>

<!-- Random content above this comment -->
<!-- Special "focus guard" elements around your
if you manually set tabindex for your form elements, you should set tabindex for the focus guards as well -->
<div class="focusguard" id="focusguard-1" tabindex="1"></div>
<input id="firstInput" type="text" tabindex="2" class="autofocus" />
<input type="text" tabindex="3" />
<input type="text" tabindex="4" />
<input type="text" tabindex="5" />
<input type="text" tabindex="6" />
<input id="lastInput" type="text" tabindex="7" />
<!-- focus guard in the end of the form -->
<div class="focusguard" id="focusguard-2" tabindex="8"></div>
<!-- Nothing underneath this comment -->

如您所见，我还确保当焦点从第一个输入向后移动时（例如，第一个输入上的SHIFT+TAB），我们会快速返回到最后一个输入

请注意，焦点保护也被指定了一个tabindex值，以确保它们在输入字段之前/之后立即被聚焦。如果您没有手动将tabindex设置为您的输入，那么两个焦点保护可以只分配

tabindex=“0”

当然，当表单是动态生成的时，您也可以在动态环境中完成这些工作。只需找出你的（不那么琐碎的任务）并用同样的焦点守卫围绕它们

希望有帮助，如果你有任何问题，请告诉我

更新

正如nbro指出的，如果在页面加载后点击TAB，上述实现会产生选择最后一个元素的不必要效果（因为这将聚焦第一个可聚焦的元素，即

#focusguard-1

，这将触发聚焦最后一个输入。为了缓解这一问题，您可以指定最初要聚焦的元素，并使用另一小块JavaScript将其聚焦：

$(function() { // can replace the onload function with any other even like showing of a dialog

  $('.autofocus').focus();
})

---

这样，只需将

自动聚焦

类设置在您想要的任何元素上，它就会聚焦在页面加载（或您收听的任何其他事件）上。

是的，在切换输入后，它会跳转到没有指定制表顺序的适当元素上。但是，在切换所有“tabbable”元素后，焦点也会跳转“超出”页面内容，进入浏览器的UI元素（选项卡、菜单、书签等）

---

我认为最简单的方法是在最后一次输入时处理

keyup

事件，并截取制表符的使用（以及SHIFT+TAB）

这里是我的解决方案，您不需要任何其他元素。如您所见，元素将在

元素中循环

$（'form'）。每个（函数（）{
var list=$（this）.find（'*[tabindex]'）.sort（函数（a，b）{返回a.tabindex

考虑到第一个输入设置了“自动聚焦”属性，我的解决方案如下：

在表单元素后添加此项（使用HTML5，它可以是任何标记）：

您可以为您不想属于taborder的每个元素设置

tabindex=“-1”

，即为代码“

随机内容”

”部分中的每个可聚焦元素。（在MDN处找不到页面。）

document.body.tabindex='0'；document.body.focus（）；document.body.tabindex='-1'

如果它们在HTM中顺序正确，您也可以使用相同的tabindex。这是一个老话题，但是在今天的多设备世界中，这个问题只会变得更加相关。

键控

方法有一个缺点，我在我的回答中添加了一个更明确的说明参见我的回答的第一部分回答这个方法，如果我理解正确的话，如果我在页面加载后第一次点击tab按钮，会使焦点转到最后一个元素，这是不可取的…@nbro-True，这是一个不幸的副作用。但是因为这个实现需要“javascript干预”“无论如何，要求还通过javascript设置初始焦点也不是不合理的。请参阅更新的答案。这应该在事件“onFocusOut”而不是“onFocus”上完成，因为在选项卡上永远不会选择最后一个元素

$('#focusguard-2').on('focus', function() {
  // "last" focus guard got focus: set focus to the first field
  $('#firstInput').focus();
});

$('#focusguard-1').on('focus', function() {
  // "first" focus guard got focus: set focus to the last field
  $('#lastInput').focus();
});

$(function() { // can replace the onload function with any other even like showing of a dialog

  $('.autofocus').focus();
})

<div tabindex="6" onFocus="document.querySelector('[autofocus]').focus()"></div>