如何在 HTML 表单上制作 Tab 循环

Question

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

Answer 1

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

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

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

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

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

这将使焦点在离开最后一个项目时循环回到表单的开头，并在从第一个开始 shift-tab 时循环到结尾。

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

拜托，拜托，与真实用户一起测试，看看他们是否喜欢它，或者他们是否因为您破坏了他们预期的标签行为而恐慌。

Answer 2

我找到了使用 jQueryUI 实现此目的的简单方法。我创建了一个 .tabloop class 并使用了以下代码段。

: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>

如何在 HTML 表单上制作 Tab 循环

How To Make A Tab Loop On HTML Form

html

javascript

css

jquery

tabs