如何在 HTML 表单上制作标签循环

Question

当用户通过表单输入框进行选项卡时，它会按顺序进行。我发现您可以在使用 tabindex=x 时订购它们。我的表单上有 5 个输入，所以我有 tabindex 5 个不同的时间。之后它会转到页面上的不同项目，那么有没有办法让它只遍历这 5 个项目？顺便说一句，我不能使用 tabindex=0 因为那样我必须将它添加到 100 个项目中。所以基本上我的问题是如何制作所谓的“标签循环”。

Answer 1

您不能以声明方式设置选项卡循环。该功能旨在在浏览器的正常选项卡行为中工作，即访问页面和浏览器 chrome 中的所有可选项卡元素。

如果您想防止从选定的元素子集跳开，您需要一点 JavaScript，并且您最好非常清楚为什么要这样做以及它会破坏什么，提供一些视觉提示，表单专注于对 UI 的其余部分的损害，并考虑一些键盘导航对他们来说更为重要的非视觉客户端。

假设您确实有意识地判断劫持选项卡是可以的，一种相对安全的方法是创建一个虚拟的选项卡元素（必须显示，但实际上可能不可见）使用 tabIndex 使其成为表单中最后一项之后的下一个，以及表单中第一个之前的另一个。

dummyItemBeforeForm.addEventListener('focus', function(e){
  lastItemOfMySuperImportantForm.focus() }, true )

dummyItemAfterForm.addEventListener('focus', function(e){
  firstItemOfMySuperImportantForm.focus() }, true )

这将使焦点在离开最后一个项目时循环回到表单的开头，并在从第一个项目移动时循环到末尾。

确保虚拟项目默认为disabled，并且只有在用户聚焦您的表单并获得表单现在是模态的视觉提示时才变得可聚焦，并在用户完成后再次禁用虚拟项目表格。

请与真实用户进行测试，看看他们是否喜欢它，或者他们是否因为你破坏了他们预期的标签行为而感到恐慌。

Answer 2

我找到了一种使用 jQueryUI 实现此目的的简单方法。我创建了一个 .tabloop 类，我正在使用以下 sn-p。

:tabbable 选择器本身并不包含在 jQuery 中，它是 jQueryUI 的一部分，但您可以轻松制作自己的。

// Focus loop inside element with class tabloop
$(function() {
  $(document).on('keydown', '.tabloop :tabbable:not([readonly])', function(e) {

    // Tab key only (code 9)
    if (e.keyCode != 9)
      return;

    // Get the loop element
    var loop = $(this).closest('.tabloop');

    // Get the first and last tabbable element
    var firstTabbable = loop.find(':tabbable:not([readonly])').first();
    var lastTabbable = loop.find(':tabbable:not([readonly])').last();

    // Leaving the first element with Tab : focus the last one
    if (firstTabbable.is(e.target) && e.shiftKey == true) {
      e.preventDefault();
      lastTabbable.focus();
    }

    // Leaving the last element with Tab : focus the first one
    if (lastTabbable.is(e.target) && e.shiftKey == false) {
      e.preventDefault();
      firstTabbable.focus();
    }
  });
});

.tabloop {
  border: 1px red solid;
  padding: 1ch;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<p>
  <label for="text1">Field 1:</label>
  <input type="text" id="text1">
</p>

<p>
  <label for="text2">Field 2:</label>
  <input type="text" id="text2">
</p>

<p>
  <a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ" target="_blank">Link</a>
</p>

<p>
  <button type="button">Button</button>
</p>

<div class="tabloop">

  <p>
    <label for="text3">Field 3:</label>
    <input type="text" id="text3">
  </p>

  <p>
    <label for="text4">Field 4:</label>
    <input type="text" id="text4">
  </p>

  <p>
    <a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ" target="_blank">Link</a>
  </p>

  <p>
    <button type="button">Button</button>
  </p>
</div>