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

【问题标题】：Setting tabindex to "last element" and "penultimate element" - possible?将 tabindex 设置为“最后一个元素”和“倒数第二个元素” - 可能吗？
【发布时间】：2016-04-09 12:22:24
【问题描述】：

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

请不要在不更改标签顺序的情况下执行此操作，以便点击选项卡按钮将在按钮出现时循环显示在屏幕上。

我的问题是：有没有办法在这两个按钮上设置 tabindex 来完成这个排序而不不必为页面上的每个其他可选项卡元素分配一个特定的 tabindex？

我对 tabindex 值的理解是，指定的正值会在没有指定值的情况下处理元素，因此我无法找到一种方法来做到这一点，而无需通过并为其他所有内容分配值。

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

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

【问题讨论】：

你评论Adding tabindex dynamically了吗？

标签： javascript jquery html tabindex

【解决方案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

更新 - 修复了不仅选择输入的查询（查看下面 John 评论中的链接）：

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

【讨论】：

这很接近，但仅将 tabindex 值应用于输入。这里的答案stackoverflow.com/questions/1599660/… 列出了所有可以具有标签索引的可聚焦元素。由于我不想打扰页面现有的 tab 顺序，我认为答案是遍历页面上所有可用的元素并找到正在使用的最大 tabindex，然后使用该值 +1 和 +2 ...
修复了您提到的答案中的选择器
@JohnHascall 每个元素的tabindex默认为0
正确，如果页面包含默认值为 0 的元素（很有可能）。然后，如果您将这些 '' 按钮放在底部，然后只给出正的 tabindexes，那么它们就会成为 taborder 中的前 2 个元素——这绝对是错误的做法。因此，似乎唯一的解决方案是遍历页面，保存 tabindex 为 0 的所有元素的列表并找到最高的 tabindex，H，然后遍历零值 tabindex 的列表，为每个元素赋值 H+1 , H+2, ... 以具有最高 tabindexes 的两个按钮结尾。

【解决方案2】：

根据规范：

分配给tabindex 的正值根据它们的tabindex 值对元素进行排序
负值使元素“无法聚焦”
值 0 使元素可聚焦，但其顺序取决于平台

mdn-html specification of tabindex

所以如果你想在你的页面中有一个特定的顺序，你必须为每个元素分配一个值。

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

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

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

然后你可以再次调用jquery：

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

您的带有highTabIndex类的按钮将根据页面中的“位置”进行排序。

【讨论】：