如何在HTML表单上进行制表符循环

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

如果你想防止从选定的元素子集中切换，你需要一点JavaScript，你会更好地了解你为什么要这样做以及它会破坏什么，给出一些视觉提示，表明表单的焦点对UI的其他部分不利，并考虑一些键盘导航对其更重要的非视觉客户端。

假设您确实在知情的情况下判断劫持选项卡是可以的，那么一种相对安全的方法是创建一个带有tabIndex的虚拟选项卡元素（必须显示，但实际上可能是不可见的），使其位于表单中最后一个项目之后的下一个，并在表单中第一个项目之前创建另一个。

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

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

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

请，请，用真实用户测试一下，看看他们是否喜欢它，或者他们是否因为你破坏了他们预期的选项卡行为而恐慌。

我发现了一种使用jQueryUI实现这一点的简单方法。我创建了一个.tableoop类，并使用以下代码段。

：选项卡式选择器不是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>

作为@NicolasBernier JqueryUI答案的后续，这是在没有"：tabable"关键字的情况下工作的代码。

// first block deals with first tabbable element
$('uniqueContainerOfElementInQuestion').find('firstTabbableElement(ex."a")').first().on('keydown', function (e) {
// first ele w/ shift and tab
    if (e.shiftKey == true && e.keyCode == 9) {
        console.log('Shift tab on first')
        e.preventDefault();
        // focus on element
        // if it isn't working uncomment out timeout as possible test/quickfix
        // setTimeout(()=>{
  $('uniqueContainerOfElementInQuestion').find('lastTabbableElement(ex."button")').last().focus();
        // })
    }
});
$('uniqueContainerOfElementInQuestion').find('lastTabbableElement(ex."button")').last().on('keydown', function (e) {
    // Leaving the last element with Tab : focus the first one
    if (e.shiftKey == false && e.keyCode == 9) {
        console.log('tab on last')
        e.preventDefault();
        // setTimeout(()=>{
        $('uniqueContainerOfElementInQuestion').find('firstTabbableElement(ex."a")').first().focus();
        // })
    }
});