javascript - 如何在到达最后一个带有 tabindex 的元素后从 1 开始重复 tabindex？

Question

例如，这是一个脚本:

<!-- 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" 开始？

Answer 1

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

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

我建议采用一种更通用的方法，该方法与焦点的变化方式无关。

这个想法是，你用特殊的“焦点守卫”元素包围你的表单元素(你想在其中创建一个“tabindex loop”)，这些元素也是可聚焦的(它们分配了一个 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 -->

现在您只需监听那些保护元素上的 focus 事件并手动将焦点更改到适当的字段(为简单起见使用 jQuery):

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

如您所见，我还确保当焦点从第一个输入向后移动时，我们会快速返回到最后一个输入(例如 SHIFT+TAB 在第一个输入)。 Live example

请注意，焦点守卫 也被分配了一个 tabindex 值，以确保它们在您的输入字段之前/之后立即获得焦点。如果您不手动将 tabindex 设置为您的输入，那么两个焦点守卫都可以只分配 tabindex="0"。

当然，当动态生成表单时，您也可以在动态环境中实现这一切。只要弄清楚你的 focusable elements (不那么琐碎的任务)并用相同的焦点守卫包围他们。

希望对您有所帮助，如果您有任何问题，请告诉我。

更新

正如 nbro 所指出的，如果在页面加载后点击 TAB，上述实现会产生选择最后一个元素的不良影响(因为这将聚焦第一个可聚焦元素，即 # focusguard-1，这将触发聚焦最后一个输入。为了减轻这种情况，您可以指定您最初想要聚焦的元素并使用另一小段 JavaScript 聚焦它:

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

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

有了这个，只需在您想要的任何元素上设置 autofocus 类，它就会专注于页面加载(或您收听的任何其他事件)。