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

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

在这个问题的已接受答案中 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 和 ???

使用 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]")

根据规范:

  • 分配给 tabindex 的正值根据元素的 tabindex 值对元素排序

  • 负值使元素成为"unfocusable"

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

mdn-html specification of tabindex

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

但是 jquery 来了: 假设应该按顺序排列的元素在 divid="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" 进行排序。