angularjs - tabindex 在特定元素处停止

Question

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

我对 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>

因此，当我们开始使用 Tab 键时，期望使用 tabindex 1 更改密码将突出显示，然后使用 tabindex 2 管理。然后循环继续。但是，选项卡停在管理

有没有人遇到过类似的问题？

Answer 1

我最近得到了一个任务，通过 tab 和 shift-tab 循环关注元素。所以，我创建了一个自定义指令。可以找到工作演示 here .

更新 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 按聚焦前一个元素。

如何使用指令？

如果您想将元素 Y 从元素 X 聚焦到 SHIFT-TAB 按，然后添加 focus-next="idofY" focus-on-tab="0"在 X 元素中。

如果要将元素 X 从元素 Y 聚焦到 TAB 按，然后添加 focus-next="idOfX" focus-on-tab="1"在 Y 元素中。

确保需要聚焦的元素支持 tabindex 默认情况下，如果不是，则 添加 tab-index="0"到那个元素。