Javascript html容器中的陷阱焦点

我正在建立一个可访问的网站，并试图管理焦点。我需要打开一个模态，然后将焦点放在模态中的第一个元素上，然后捕获焦点，直到模态关闭（“取消”或“接受”）

HTML

---

有一个名为ngBlur的指令，当元素失去焦点时触发事件。尝试在ng blur上执行聚焦功能

在这里：

例如：

---

您永远无法选择第二个输入框，因为ng blur语句有多种可能捕捉焦点

一种解决方案是在显示模态时，在模态背景中的所有元素上手动临时设置

tabindex=“-1”

（并删除此tabindex，或在离开模态时恢复为原始tabindex）

另一个解决方案是查看angular bootstrap计划如何解决此问题：

---

你也可以看看WAI ARIA页面，他们有一个相关的内容：

好的，经过太多的搜索，这就是我想到的。基本上，我在模态的最后一个元素和模态后面的下一个元素上创建了ng焦点函数。这样，我可以检查焦点是否存在于模态中，如果不存在，我会将焦点循环回顶部

      <a href="" ng-click="modalshow = !modalshow; modal.open();">Open Modal</a>
      <div ng-show="modalshow" id="modal">
        <h3 id="tofs" >Terms of Service</h3>
        <p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum </p>
        <a href="" ng-focus="modalshow.onFocus($event)">Cancel</a> 
        <a href="" ng-focus="modalshow.onFocus($event)">Accept</a> 
      </div>
      <h2>Seprate Content</h2>
      <a href="" ng-focus="modalshow.onFocus($event)">next link<a>

---

当模态可见时，您可以添加此代码以将所有焦点事件捕获到h3标记。

不要使用任何要求您查找“tabbable”元素的解决方案。相反，使用

keydown

并在有效庄园中单击

事件或背景

您需要做的是有一个常规的
窗口。使用
preventDefault（）
的keydown
事件在显示模式时停止所有选项卡，使用
stopPropagation（）
的
keydown.tab
事件处理模式的选项卡

您可以在类似的庄园中使用
单击
事件，也可以使用背景来防止单击其后面的元素

对于Angular1，我想这看起来与Asheesh Kumar的答案类似。您可以在此处看到我的Angular2-x解决方案：
ng如果事件包括模糊的方向，则模糊将起作用。例如，在模式/对话框中向下移动页面流，而不是进行备份。由于模式/对话框中可能有多个元素，因此不能仅根据元素的模糊程度将焦点发送到开头。
angular.module('app')
    .controller('Controller', modalCtrl);

  function modalCtrl() {
     $scope.modal = {
       open: function() {
         angular.element('#tofs').focus();

       }
     }
  }

      <a href="" ng-click="modalshow = !modalshow; modal.open();">Open Modal</a>
      <div ng-show="modalshow" id="modal">
        <h3 id="tofs" >Terms of Service</h3>
        <p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum </p>
        <a href="" ng-focus="modalshow.onFocus($event)">Cancel</a> 
        <a href="" ng-focus="modalshow.onFocus($event)">Accept</a> 
      </div>
      <h2>Seprate Content</h2>
      <a href="" ng-focus="modalshow.onFocus($event)">next link<a>

angular.module('app')
    .controller('Controller', modalCtrl);

  function modalCtrl() {
     $scope.modal = {
       open: function() {
         angular.element('#tofs').focus();

       },
       onFocus: function(){
         var modal = angular.element('#modal')[0];

         if (!modal.contains( event.target ) && $scope.modalIsOpen) {
           event.stopPropagation();
           angular.element('#tofs').focus();
         }
       }
     }
  }

angular.element("html").on("focusin", "body", function (event) {
   if(angular.element("#modal:visible").length>0){
       event.preventDefault();
       event.stopPropagation();
       angular.element('#tofs').focus();
   }
});