如何在tabindex到tabindex的最后一个元素后重复tabindex？ [英] How to repeat the tabindex from 1 after it has gone to the last element with a tabindex?
问题描述
<！ - 此评论之上的随机内容 - >
< input type =texttabindex =1/>
< input type =texttabindex =2/>
< input type =texttabindex =3/>
< input type =texttabindex =4/>
< input type =texttabindex =5/>
< input type =texttabindex =6/>
<！ - 此评论下方没有内容 - >
所以，当用户按下tab并浏览六个文本框时，到达最后一个文本框，然后按下它会转到第一条评论上方的内容，对不对？那么，我该如何让它从> tabindex =1再次开始呢？
不幸的是，如果没有JavaScript，你无法做到这一点。您可以收听 TAB （并确保它不是 SHIFT + TAB ）键，按住最后一个元素并手动将焦点设置为您的处理程序中的第一个元素。但是，将此逻辑与键盘事件（即特定输入方法）绑定在一起并不普遍，并且在使用时可能不起作用：
我提出一个更通用的方法，它不知道焦点是如何改变的。 >
这个想法是你可以使用特殊的focus guard元素来围绕你的表单元素（你想创建一个tabindex循环的地方）也（他们有一个tabindex分配）。这里是你的修改过的HTML：
< p>一些示例< a href =＃tabindex =0> ;内容< / A>这里...< / p为H.
< p>与其他< input type =textvalue =input/>元素或<按钮>按钮< /按钮> ...< / p>
<！ - 此评论上方的随机内容 - >
<！ - 如果您为表单元素手动设置tabindex，则应该在
周围使用特殊的焦点警卫元素，还应该为焦点警卫设置tabindex - >
< div class =focusguardid =focusguard-1tabindex =1>< / div>
< input id =firstInputtype =texttabindex =2class =autofocus/>
< input type =texttabindex =3/>
< input type =texttabindex =4/>
< input type =texttabindex =5/>
< input type =texttabindex =6/>
< input id =lastInputtype =texttabindex =7/>
<！ - 表格末尾的重点警卫 - >
< div class =focusguardid =focusguard-2tabindex =8>< / div>
<！ - 此评论下方没有内容 - >
现在您只需听取焦点事件这些保护元素并手动将焦点转移到适当的字段（为简单起见，使用jQuery）：
$（'＃focusguard （'＃firstInput'）。focus（）（'focus'，function（）{
//lastfocus guard got focus：set focus to the first field
$（'＃firstInput'）。 ;
}）; $（）＃
$（'＃focusguard-1'）。on（'focus'，function（）{
//first焦点守卫获得焦点：将焦点设置到最后一个字段
$（'＃lastInput'）。focus（）;
}）;
正如您所看到的，我还确保当焦点向后移动时，我们会回到最后一个输入从第一个输入（例如，第一个输入上的 SHIFT + TAB ）。 现场示例
请注意 focus guard 也会分配一个tabindex值，以确保它们紧挨着输入字段之前/之后的焦点。如果您不手动设置tabindex到您的输入，那么这两个焦点警卫都可以只分配 tabindex =0。
当然，您也可以在动态生成表单时在动态环境中工作。只要找出您的可重点元素（较不重要的任务），并用相同的警卫环绕它们。
希望有帮助，如果您有任何问题，请告诉我。
UPDATE
正如nbro指出的那样，上面的实现有不希望的选择如果在页面加载后点击 TAB ，最后一个元素（因为这会聚焦第一个可调焦元素＃focusguard-1 ，那会触发器会聚焦最后一个输入，为了减轻这一点，你可以指定你最初想要关注的元素，并用另一小块JavaScript来关注它：
$（'。autofocus'）。focus（）;
} ）
随着这只需在任何你想要的元素上设置 autofocus 类，它就会专注于页面加载（或任何你听的其他事件）。
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?
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:
- 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:
<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 focus events on those guard elements and manually change focus to the appropriate field (jQuery used for the sake of simplicity):
$('#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+TAB on the first input). Live example
Note that the focus guards are 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.
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 TAB after 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:
$(function() { // can replace the onload function with any other even like showing of a dialog
$('.autofocus').focus();
})
With this, just set the autofocus class on whatever element you want, and it'll be focused on page load (or any other event you listen to).
这篇关于如何在tabindex到tabindex的最后一个元素后重复tabindex？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
