tabindex 在特定元素中停止

Question

我在应用程序中使用Angular JS。我在某些可点击元素上使用tabindex以支持应用程序的键盘用户。

我的理解是，如果一个元素A获得了tabindex = 1，元素B获得了tabindex = 3，元素C获得了tabindex = 2，则tab顺序将是A->C->B。然后循环继续。

我提供了以下代码片段。这部分实际上是一个模态框，它出现在另一页的上方:

<div data-ng-if="true">
    <a tabindex="1" data-ng-click="function1()">Change Password</a>
</div>
<div>
    <a tabindex="2" data-ng-click="function2()">Manage</a>
</div>

当我们开始使用选项卡时，预期的是更改密码会以tabindex 1突出显示，然后是管理（tabindex 2）。然后循环继续。然而，选项卡停留在管理处。

有人遇到类似的问题吗？

- rupali317

---

选项卡无法聚焦“更改密码”？ - Sai M.

当我开始按Tab键时，tabindex会突出显示“更改密码”，然后在下一个选项卡中，它会转到“管理”。当我再次按Tab键时，突出显示仅停留在“管理”上。理想情况下，它应该返回到“更改密码”。这就是我面临的问题。 - rupali317

请提供相应的 Plunker。 - Sai M.

Answer 1

最近我接到了一个任务，需要通过tab和shift-tab在元素之间循环聚焦。因此，我创建了一个自定义指令。可以在这里找到工作演示。

更新的HTML：

  <div data-ng-if="true">
    <a tabindex="1" id="idChangePassword" focus-next="idManage" focus-on-tab="0" data-ng-click="function1()">Change Password</a>
  </div>
  <div>
    <a tabindex="2" id="idManage" focus-next="idChangePassword" focus-on-tab="1" data-ng-click="function2()">Manage</a>
  </div>

指令代码：

angular.module("myApp.directives", []).directive("focusNext", function() {
  return {
    restrict: "A",
    link: function($scope, elem, attrs) {
      elem.bind("keydown", function(e) {
        var code = e.keyCode || e.which;
        console.log(e);
        if (code === 9 && e.shiftKey === true && attrs.focusOnTab === "0") {
          e.preventDefault();
          document.getElementById(attrs.focusNext).focus();
        } else if (
          code === 9 &&
          e.shiftKey === false &&
          attrs.focusOnTab === "1"
        ) {
          console.log("tab");
          e.preventDefault();
          document.getElementById(attrs.focusNext).focus();
        } else {
          return true;
        }
      });
    }
  };
});

请注意，按下TAB键会将焦点移到下一个元素，按下SHIFT-TAB键会将焦点移到上一个元素。 如何使用该指令？ 如果您想要在SHIFT-TAB键按下时从元素X聚焦到元素Y，则在X元素中添加focus-next="idofY" focus-on-tab="0"。

如果您想要在按下TAB键时从元素Y聚焦到元素X，则在Y元素中添加focus-next="idOfX" focus-on-tab="1"。

请确保需要聚焦的元素默认支持tabindex，如果没有，请在该元素中添加tab-index="0"。

- Coding man

Answer 2

• 如果 tabindex 是负值，则无法使用tab键聚焦它。
• 如果是零，则为文档中第一个可聚焦的元素。
• 如果是正数，则元素将按升序聚焦。
• 如果元素包含相同的tabindex，则html中的顺序很重要。按照在html中创建的顺序聚焦。

有关更多信息，请阅读tabindex

最重要的是，浏览器URL框具有tabindex 0

- Mr_Perfect

Answer 3

我认为 tabindex 是按相反的顺序工作的，例如如果 A=1，B=2，C=3，则顺序是 C>B>A。

- user6561546