Question

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

我对tabindex的理解是假设一个元素A获得tabindex = 1，元素B得到tabindex = 3，元素C得到tabindex = 2，那么tabbing的顺序将是A - ＆gt; C - ＆gt; B.然后循环继续。

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

npm start

因此，当我们开始标记期望时，将突出显示使用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 键将焦点移到上一个元素。

如何使用指令？

如果要按 SHIFT-TAB 上的元素X聚焦元素Y，然后在X元素中添加focus-next="idofY" focus-on-tab="0"。

如果要在 TAB 上将元素X集中在元素X上，然后在Y元素中添加focus-next="idOfX" focus-on-tab="1"。

请确保默认情况下需要重点关注的元素支持 tabindex ，如果不支持，则向该元素添加tab-index =“ 0” 。

Answer 2

如果 tabindex 为负值，则无法通过使用来关注它 tab按。
如果为零，那么这是文档中的第一个可聚焦元素。
如果是正数，则元素将集中在升序中订单
如果元素包含相同的tabindex，则html中的顺序很重要。重点按照在html中创建它们的顺序

了解更多信息，请阅读tabindex

最重要的是，浏览器网址框使用tabindex 0

Answer 3

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

tabindex在特定元素中停止

3 个答案: