AngularJs：在不同的组/表单/div中使用TAB键进行键盘导航答案

【问题标题】：AngularJs: Keyboard navigation using TAB key in different groups/forms/divsAngularJs：在不同的组/表单/div中使用TAB键进行键盘导航
【发布时间】：2016-05-04 16:00:27
【问题描述】：

我有两个组，我想为它们分开导航，并在按下 Tab 键时在组的最后一个选项卡控件上重新开始迭代周期，并且焦点应该移动到组的初始元素（这将成为 0 索引）

在下面给出的示例中，我添加了两个组，并且在组中我添加了一些文本框并且分配了非序列顺序。

问题

当 Pressing tab 焦点在组间移动时
在最后一个索引上，循环没有重新开始，而是进入地址栏中

注意：我正在制作一个 angularjs 应用程序，这只是一个假人，可以清楚地了解我的问题

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <div role="group" tabindex="-1">
        <h1>Group 1</h1>
        <br>
        <input type="text" tabindex="1" />
        <br>
        <input type="text" tabindex="6" />
        <br>
        <input type="text" tabindex="4" />
        <br>
        <input type="text" tabindex="2" />
        <br>
        <input type="text" tabindex="5" />
        <br>
        <input type="text" tabindex="2" />
        <br>
        <button tabindex="7">Submit</button>
    </div>
    <hr>

    <div>
        <div role="group" tabindex="-1">
            <h1>Group 2</h1>
            <br>
            <input type="text" tabindex="1" />
            <br>
            <input type="text" tabindex="6" />
            <br>
            <input type="text" tabindex="4" />
            <br>
            <input type="text" tabindex="2" />
            <br>
            <input type="text" tabindex="5" />
            <br>
            <input type="text" tabindex="2" />
            <br>
            <button tabindex="7">Submit</button>
        </div>
    </div>
</body>

</html>

【问题讨论】：

标签： javascript jquery html angularjs

【解决方案1】：

非常感谢 @Kiran Nawale 和 @Gökhan Kurt 指导我找到解决方案。

我创建了一个通用指令，可用于任何 Angular 应用程序。

依赖关系

jQuery
AngularJs

在指令中，我添加了 cmets，它将指导您完成指令的工作方式。

如何使用？

在你的元素中添加下面给出的属性和指令

tab-man tab-index="0" tab-group="g1"

tab-man : the directive
tab-index : it is the index of the element in the group
tab-group : name of the group

注意：

每个组中应该始终有一个0 索引，否则循环将不会重新启动。
如果像 0,1,2,4... 这样跳过任何索引（3 被跳过），那么在 2 之后焦点将移至 0

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
  <script>
    var app = angular.module('myapp', []); /// angular app


    app.directive('tabMan', function() { ///directive
      return {
        restrict: 'A', /// accessible only by attribute
        scope: {}, /// scope is not needed

        link: function(scope, element, attrs) { ///link function to add key-down event on the target element

          var gotoElement = function(grp, idx) {
            /// get next element
            var nextElement = $("input[tab-group='" + grp + "'][tab-index='" + idx + "']")[0];

            /// if there is not next element then go to the 0 index
            if (nextElement == undefined) {
              if (idx != 0) { /// if the index is 0 then do not do any thing
                gotoElement(grp, 0); /// restart the cycle
              }
            } else {
              nextElement.focus(); /// succesfully give focus to the next
            }

          };

          var tabIndex = attrs.tabIndex;
          var tabGroup = attrs.tabGroup;

          $(element).keydown(function(event) {

            if (event.keyCode == 9) { /// go inside if tab key is pressed

              var tIdx = $(event.target).attr("tab-index"); /// get the current index of element
              var nextTid = parseInt(tIdx.toString()) + 1; /// get the next index of element
              nextTid = Number(nextTid); /// turn the index into number

              var tGrp = $(event.target).attr("tab-group"); /// get the group of the element

              gotoElement(tGrp, nextTid); /// go to the next element

              /// the work of tab is done by the directive so remove the default and stop the bubbeling
              event.stopPropagation()
              event.preventDefault();
            }

          });
        }
      };
    });
  </script>
</head>

<body ng-app="myapp">
  <div role="group" tabindex="-1">
    <h1>Group 1</h1>
    <br>
    <input type="text" tab-man tab-index="0" tab-group="g1" />
    <br>
    <input type="text" tab-man tab-index="5" tab-group="g1" />
    <br>
    <input type="text" tab-man tab-man tab-index="2" tab-group="g1" />
    <br>
    <input type="text" tab-man tab-index="3" tab-group="g1" />
    <br>
    <input type="text" tab-man tab-index="4" tab-group="g1" />
    <br>
    <input type="text" tab-man tab-index="1" tab-group="g1" />
    <br>
    <button>Submit</button>
  </div>
  <hr>

  <div>
    <div role="group" tabindex="-1">
      <h1>Group 2</h1>
      <br>
      <input type="text" tab-man tab-index="0" tab-group="g2" />
      <br>
      <input type="text" tab-man tab-index="5" tab-group="g2" />
      <br>
      <input type="text" tab-man tab-man tab-index="2" tab-group="g2" />
      <br>
      <input type="text" tab-man tab-index="3" tab-group="g2" />
      <br>
      <input type="text" tab-man tab-index="4" tab-group="g2" />
      <br>
      <input type="text" tab-man tab-index="1" tab-group="g2" />
      <br>
      <button>Submit</button>
    </div>
  </div>
</body>

【讨论】：

我试过上面的代码重启，但是光标从上到下导航，我需要光标从左到右然后向下移动，我该如何实现它
可以设置tab-index="2"
谢谢，重新启动循环工作正常，但我的问题是：stackoverflow.com/questions/44455082/…，当设计在不同的 div 中使用您的指令时，我如何从左到右导航然后向下导航？跨度>

【解决方案2】：

很遗憾，如果没有 JavaScript，您将无法做到这一点。

这里我已经实现了 JavaScript/jQuery 代码来处理两个组之间的选项卡。

另外请注意，要移至第二组，您/用户必须决定何时移至第二组输入。

HTML

<div id="group-1" role="group" tabindex="0">
  <h1>Group 1</h1>
  <br>
  <input type="text" tabindex="1" />
  <br>
  <input type="text" tabindex="1" />
  <br>
  <input type="text" tabindex="1" />
  <br>
  <input type="text" tabindex="1" />
  <br>
  <input type="text" tabindex="1" />
  <br>
  <input type="text" tabindex="1" />
  <br>
  <input type="button" value="submit" tabindex="1" />
  <div id="focusguard-1" tabindex="1"></div>
</div>
<hr>

<div>
  <div id="group-2" role="group" tabindex="0">
    <h1>Group 2</h1>
    <br>
    <input type="text" tabindex="1" />
    <br>
    <input type="text" tabindex="1" />
    <br>
    <input type="text" tabindex="1" />
    <br>
    <input type="text" tabindex="1" />
    <br>
    <input type="text" tabindex="1" />
    <br>
    <input type="text" tabindex="1" />
    <br>
    <input type="button" value="submit" tabindex="1" />
    <div id="focusguard-2" tabindex="1"></div>
  </div>
</div>

JavaScript/JQuery

$('#focusguard-1').on('focus', function() {
  $('#group-1 input:first').focus();
});

$('#focusguard-2').on('focus', function() {
  console.log("Focus in");
  $('#group-2 input:first').focus();
});

【讨论】：

【解决方案3】：

tabindex 在一个窗口中全局工作。你可以用javascript实现你想要的。您的组必须有一个类“closedFocus”，并且您的元素应该有一个 tabIndex。你可以改代码来达到你想要的效果：

$(".closedFocusGroup [tabindex]").on("keydown", function(e) {
  if (e.which == 9) {
    var parentGroup = this.closest(".closedFocusGroup");
    var allChildren = $(parentGroup).find("[tabindex]");
    allChildren.sort(function(a,b){ return a.tabIndex-b.tabIndex});
    var thisIndex = allChildren.index(this);
    var nextIndex = (thisIndex + 1) % allChildren.length;
    var nextItem = allChildren[nextIndex];
    if (nextItem) nextItem.focus();
    e.preventDefault();
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div role="group" class="closedFocusGroup" tabindex="-1">
  <h1>Group 1</h1>
  <br>
  <input type="text" tabindex="1" />
  <br>
  <input type="text" tabindex="6" />
  <br>
  <input type="text" tabindex="4" />
  <br>
  <input type="text" tabindex="2" />
  <br>
  <input type="text" tabindex="5" />
  <br>
  <input type="text" tabindex="2" />
  <br>
  <button tabindex="7">Submit</button>
</div>
<hr>

<div>
  <div role="group" class="closedFocusGroup" tabindex="-1">
    <h1>Group 2</h1>
    <br>
    <input type="text" tabindex="1" />
    <br>
    <input type="text" tabindex="6" />
    <br>
    <input type="text" tabindex="4" />
    <br>
    <input type="text" tabindex="2" />
    <br>
    <input type="text" tabindex="5" />
    <br>
    <input type="text" tabindex="2" />
    <br>
    <button tabindex="7">Submit</button>
  </div>
</div>

【讨论】：