Javascript 在使用 tabindex 到达最后一个元素后，如何从 1 重复 tabindex？

How to repeat the tabindex from 1 after it has gone to the last element with a tabindex?

提问by Lucas

So, for example, here's a script:

因此，例如，这是一个脚本：

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

So, when the user presses tab and goes through the six textboxes, reaches the last one and then presses tab, it would go to the content above the first comment, right? Well, how do I make it start from tabindex="1"again?

那么，当用户按 tab 并浏览六个文本框，到达最后一个然后按 tab 时，它会转到第一个评论上方的内容，对吗？好吧，我如何让它重新开始tabindex="1"？

回答by Dmitry Pashkevich

Unfortunately, you can't do that without javascript. You can listen to a TAB(and make sure it's not SHIFT+TAB) key press on your last element and manually set the focus to your first element inside the handler. However, binding this logic to keyboard events (i.e. specific input method) is not universal and may not work when using:

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

• A mobile browser
• Some other entertainment device (smart tv, gaming console, etc. - they typically use a D-Pad for jumping between focusable elements)
• An accessibility service

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

I suggest a more universal approach which is agnostic of how the focus is changed.

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

The idea is that you surround your form elements (where you want to create a "tabindex loop") with special "focus guard" elements that are focusable too (they have a tabindex assigned). Here is your modified HTML:

这个想法是你用特殊的“焦点守卫”元素包围你的表单元素（你想要创建一个“ tabindex循环”），这些元素也可以聚焦（它们分配了一个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 -->

Now you just listen to focusevents on those guard elements and manually change focus to the appropriate field (jQuery used for the sake of simplicity):

现在，您只需监听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();
});

As you see, I also made sure that we snap back to the last input when the focus moves backwards from the first input (e.g. SHIFT+TABon the first input). Live example

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

Note that the focus guardsare assigned a tabindex value too to make sure they are focused immediately before/after your input fields. If you don't manually set tabindex to your inputs, then both focus guards can just have tabindex="0"assigned.

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

Of course you can make this all work in a dynamic environment as well, when your form is generated dynamically. Just figure out your focusable elements(less trivial task) and surround them with the same focus guards.

当然，当您的表单是动态生成时，您也可以使这一切都在动态环境中工作。只需找出您的可聚焦元素（不太重要的任务）并用相同的聚焦守卫将它们包围起来。

Hope that helps, let me know if you have any issues.

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

UPDATE

更新

As nbro pointed out, the above implementation has the unwanted effect of selecting the last element if one hits TABafter the page loads (as this would focus the first focusable element which is #focusguard-1, and that would trigger focusing the last input. To mitigate that, you can specify which element you want initially focused and focus it with another little piece of JavaScript:

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

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

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

With this, just set the autofocusclass on whatever element you want, and it'll be focused on page load (or any other event you listen to).

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

回答by redexp

Here my solution where you no need any other elements. As you can see elements will be looping inside <form>elements.

这是我的解决方案，您不需要任何其他元素。如您所见，元素将在<form>元素内循环。

$('form').each(function(){
    var list  = $(this).find('*[tabindex]').sort(function(a,b){ return a.tabIndex < b.tabIndex ? -1 : 1; }),
        first = list.first();
    list.last().on('keydown', function(e){
        if( e.keyCode === 9 ) {
            first.focus();
            return false;
        }
    });
});

回答by Nicolas Goy

Here is my solution, considering the first input has the "autofocus" attribute set:

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

Add this after your form element (with HTML5 it can be any tag):

在你的表单元素之后添加这个（对于 HTML5，它可以是任何标签）：

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

回答by CyberDude

Yes, after tabbing through the inputs it will jump on suitable elements that do not have a tab order specified. But also, after tabbing all "tabbable" elements, the focus will jump "outside" your page content, onto the browser's UI elements (tabs, menus, bookmarks, etc)

是的，在输入选项卡后，它将跳转到没有指定选项卡顺序的合适元素。而且，在标记所有“可选项卡”元素后，焦点将跳到页面内容的“外部”，到浏览器的 UI 元素（选项卡、菜单、书签等）上

I think the easiest way is to handle the keyupevent on the last input and intercept TABusage (and SHIFT+TABfor that matter)

我认为最简单的方法是处理keyup最后一次输入的事件并拦截TAB使用（和SHIFT+TAB就此而言）

回答by Nitesh Patil

I wd suggest you to increase your tabindex ie. >100 and also give the tabIndex to your "content" container div please note that your content container must have tabindex less than input boxes for ex.99 .

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

when you press tab on last input box manually set focus on your content div using javascript (you can use keypress handlers for tab key)

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

document.getElementById("content").focus();

you must giv tabindex to your "content" to set focus to it.

您必须将 tabindex 赋予您的“内容”以设置焦点。

now if you press tab focus will automatically shift to first input box.

现在，如果您按 Tab 键，焦点将自动转移到第一个输入框。

hope this will help.

希望这会有所帮助。

Thank you

谢谢