24

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

<!-- 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"呢？

4

5 回答 5

24

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

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

我建议一种更通用的方法，它不知道焦点是如何改变的。

这个想法是你用特殊的“焦点保护”元素包围你的表单元素（你想要创建一个“ 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类设置在您想要的任何元素上，它将专注于页面加载（或您收听的任何其他事件）。

于 2013-01-14T08:23:55.890 回答
10

这是我的解决方案，您不需要任何其他元素。如您所见，元素将在<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;
        }
    });
});
于 2013-06-03T16:06:23.337 回答
2

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

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

<div tabindex="6" onFocus="document.querySelector('[autofocus]').focus()"></div>
于 2016-05-30T22:21:39.587 回答
1

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

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

于 2013-01-14T08:25:42.537 回答
0

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

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

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

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

现在如果你按下 tab 焦点将自动转移到第一个输入框。

希望这会有所帮助。

谢谢

于 2013-01-14T08:06:38.647 回答