将 tabindex 设置为 "last element" 和 "penultimate element" - 可能吗？

Question

在这个问题的已接受答案中 Multiple submit buttons in an HTML form 提出了评论：

Please don't do this without also changing the tab order, so that hitting the tab button will cycle through the buttons as they appear on screen.

我的问题是：有没有办法在这两个按钮上设置 tabindex 来完成此排序而无需 为页面上的每个其他可制表元素分配特定的 tabindex ？

我对 tabindex 值的理解是指定的正值使元素 w/o 成为指定的值，所以我不知所措 w/o 遍历并分配所有内容否则一个值。

如果确实如此，为每个项目分配一个特定的 tabindex 是唯一的方法，是否有一些（希望简短并且希望 jQuery）魔术来为页面上的每个适当元素分配一个 tabindex，比如 1 ？

编辑
看起来解决方案将涉及将特定的 tabindex 应用于每个其他可制表对象 - 似乎解决方案的一个重要部分将是：在 jQuery 到 [=33 中是否有方便的方法=] 每个表格对象？所有 s s s 和 ???

Answer 1

使用 Adding tabindex dynamically 并修复按钮索引：

$(":input:not(:hidden)")
  .each(function (i) {
    $(this).attr('tabindex', i + 1);
  });
var r = $('input.r').attr('tabindex');
$('input.r').attr('tabindex', $('input.l').attr('tabindex'));
$('input.l').attr('tabindex', r);

html:

<input type="submit" value="Next" class="r" />
<input type="submit" value="Previous" class="l" />

Plunk

更新 - 修复了对 select 的查询，而不仅仅是输入（检查下面 John 评论中的 link）：

$("a[href],area[href],input:not([disabled]),select:not([disabled]),\
textarea:not([disabled]),button:not([disabled]),iframe,[tabindex],\
[contentEditable=true]")

Answer 2

根据规范：

分配给 tabindex 的正值根据元素的 tabindex 值对元素排序
负值使元素成为"unfocusable"
值 0 使元素可聚焦，但其顺序取决于平台

mdn-html specification of tabindex

因此，如果您希望在您的页面中有一个特定的顺序，您必须为每个元素分配一个值。

但是 jquery 来了：假设应该按顺序排列的元素在 div 和 id="myDiv" 中然后你可以这样做：

$("#myDiv").find("*").prop("tabindex", 1);

这将使 myDiv 的每个 child/subchild 元素的 tabindex 为 1。然后你的两个按钮可以分配 css class（例如：class="highTabIndex"）。

然后你可以再次调用jquery:

var idx = 2;
$("#myDiv").find(".highTabIndex").each(function(idx, element) {
    element.prop("tabindex", idx++);
});

您的带有 class highTabIndex 的按钮将根据页面中的 "position" 进行排序。

将 tabindex 设置为 "last element" 和 "penultimate element" - 可能吗？

Setting tabindex to "last element" and "penultimate element" - possible?

javascript

jquery

html

tabindex