如何在tabindex移到最后一个元素后从1重复tabindex

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

本文关键字：tabindex 元素 1重复 最后一个      更新时间：2023-09-26

例如，下面是一个脚本:

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

所以，当用户按下tab键，浏览六个文本框，到达最后一个文本框，然后按下tab键，它会转到第一个注释上面的内容，对吧?我怎么从tabindex="1"开始呢?

不幸的是，没有javascript就无法做到这一点。您可以在最后一个元素上收听TAB(并确保它不是SHIFT+TAB)按键，并手动将焦点设置为处理程序中的第一个元素。然而，将此逻辑绑定到键盘事件(即特定的输入法)并不是通用的，并且在使用

时可能不起作用:
  • 移动浏览器
  • 一些其他娱乐设备(智能电视，游戏机等-他们通常使用D-Pad在可对焦元素之间跳转)
  • 无障碍服务

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

的想法是，你包围你的表单元素(你想要创建一个"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 -->

现在您只需监听这些保护元素上的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();
});

正如你所看到的，我还确保当焦点从第一个输入向后移动时，我们快速返回到最后一个输入(例如，在第一个输入上SHIFT+TAB)。生活例子

注意，焦点保护也被分配了一个tabindex值，以确保它们在输入字段之前/之后立即被关注。如果你不手动设置tabindex到你的输入，那么两个焦点保护可以只分配tabindex="0"。

当然，当表单是动态生成的时候，您也可以使这一切在动态环境中工作。只要找出你的可聚焦元素(不那么琐碎的任务)，并在它们周围设置相同的焦点保护。

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

正如nbro指出的那样，如果在页面加载后点击TAB，则上述实现具有选择最后一个元素的不必要效果(因为这会聚焦第一个可聚焦的元素#focusguard-1，并且会触发聚焦最后一个输入)。为了解决这个问题，你可以指定你想首先关注哪个元素，然后用另一小段JavaScript来关注它:

$(function() { // can replace the onload function with any other even like showing of a dialog
  $('.autofocus').focus();
})

这样，只需将autofocus类设置在您想要的任何元素上，它将专注于页面加载(或您收听的任何其他事件)

这是我的解决方案，您不需要任何其他元素。如你所见，元素将在<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;
        }
    });
});

考虑到第一个输入具有"autofocus"属性集，这是我的解决方案:

在你的表单元素之后添加这个(在HTML5中它可以是任何标签):

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

是的，在通过选项卡浏览输入后，它将跳到没有指定选项卡顺序的合适元素上。但是，在选择了所有的"tabbable"元素之后，焦点会跳出页面内容，跳转到浏览器的UI元素(选项卡、菜单、书签等)

我认为最简单的方法是处理keyup事件上的最后输入和拦截TAB使用(和SHIFT+TAB对于这件事)

我建议你增加你的索引。> 100也给你的"内容"容器div tabIndex请注意，您的内容容器的tabindex必须少于ex.99的输入框。

当你在最后一个输入框上按TAB键时，使用javascript手动设置焦点在你的内容div上(你可以使用TAB键的按键处理程序)

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

你必须给你的"content"指定tabindex来设置焦点。

现在如果你按TAB键焦点会自动移到第一个输入框。

希望这对你有帮助。

谢谢

相关文章：