将tabindex设置为“最后一个元素”和“倒数第二个元素” - 可行吗？

Question

在这个问题的被接受答案中Multiple submit buttons in an HTML form，引发了以下评论：

请不要这样做而不改变选项卡顺序，以便 按下标签键将循环浏览屏幕上显示的按钮。

我的问题是：有没有一种方法可以设置这两个按钮的tabindex以实现这个排序而无需给页面上的每个其他可制表元素分配特定的tabindex？

我对tabindex值的理解是指定的正值会在没有指定值的元素之前进行处理，因此我无法想出一种不用去逐个分配值的方法来实现这一点。

如果确实，分配一个具体的tabindex到每个项目是唯一的方法，是否有一些（希望简短并且希望是jQuery）神奇的方式来给页面上的每个合适的元素赋予tabindex 1？

编辑： 由于看起来解决方案将涉及向每个其他可制表对象应用特定的tabindex -- 因此，解决方案中的一个重要部分似乎是：在jQuery中是否有一种方便的方法来选择每个可制表对象？所有的s s和 ???

- John Hascall

---

你有没有看过动态添加tabindex的内容？ - Artem

Answer 1

根据规范：

• 为tabindex分配正值将根据其tabindex值对元素进行排序

• 负值使元素“无法聚焦”

• 0值使元素可聚焦，但其顺序取决于平台

tabindex的mdn-html规范

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

但是这里来了jquery： 假设要按顺序显示的元素位于具有id="myDiv"的div中。 您可以执行以下操作：

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

这将使得myDiv的所有子元素和孙子元素都具有1的tabindex属性。然后您可以给您的两个按钮赋一个css类 (例如: class="highTabIndex")。

接下来您可以再次调用JQuery:

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

如果您的按钮有 highTabIndex 类，则会根据页面中的“位置”进行排序。

- Flocke

Answer 2

使用动态添加tabindex并修复按钮索引：

$(":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" />

点此

更新 - 修复了查询以选择不仅仅是输入（请查看约翰下面的评论中的链接）:

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

- Artem

---

这很接近，但仅适用于输入。此处的答案https://dev59.com/gHI-5IYBdhLWcg3w8dYQ列出了所有可以具有tabindex的可聚焦元素。由于我不想打扰页面现有的标签顺序，因此我认为答案是遍历页面上所有可用元素并找到正在使用的最大tabindex，然后使用该值+1和+2 … - John Hascall

从您提到的答案中，修复了带有选择器的 Plunk。 - Artem

@JohnHascall 每个元素的tabindex默认为0 - Artem

如果页面上有默认值为0的元素（很可能会出现这种情况），那么如果您将这些“<Prev”、“Next>”按钮放在底部并仅给它们正数tabindex，那么它们将成为taborder中的前两个元素——这绝对是错误的做法。因此，唯一的解决方案似乎是遍历页面，保存所有tabindex为0的元素列表，并找到最高的tabidex“H”，然后遍历零值tabindex列表，为每个元素分配值H+1、H+2等，以最高的tabindexes结束，使得这两个按钮具有最高的tabindexes。 - John Hascall