Question

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

请不要在不更改Tab键顺序的情况下执行此操作点击标签按钮会在按钮出现时循环显示在屏幕上。

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

我对tabindex值的理解是，指定的正值会使指定值的元素继续运行，因此我无法找到一种方法来执行此操作，并将其他所有值分配给它。

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

修改
因为看起来解决方案将涉及将特定的tabindex应用于每个其他可标记对象 - 似乎解决方案的一个重要部分将是：jQuery中有一种方便的方法来选择每个可标记对象吗？所有的s和???

Answer 1

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

Answer 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将按照页面中的“位置”排序。

将tabindex设置为“last element”和“倒数第二个元素” - 可能吗？

2 个答案: