Question

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

HTML

<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>
    <span>Cancel</span> 
    <span>Accept/span> 
  </div>
  <h2>Seprate Content</h2>

的Javascript

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

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

       }
     }
  }

Answer 1

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

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

Answer 2

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

下面： https://docs.angularjs.org/api/ng/directive/ngBlur

一个例子： http://jsbin.com/hemaye/1/edit?html,js,output

由于ng-blur语句

，您无法选择第二个输入框

Answer 3

有多种可能性来捕获焦点。

一种解决方案是在显示模式背景中的所有元素上临时手动设置tabindex="-1"（并删除此tabindex，或在离开模态时恢复为原始tabindex）。

另一种解决方案是查看angular-bootstrap计划如何解决此问题：https://github.com/angular-ui/bootstrap/issues/738

您还可以查看WAI ARIA页面，他们有相关内容：http://www.w3.org/TR/wai-aria-practices/#trap_focus_div

Answer 4

好的，经过太多的搜索，这就是我想出来的。基本上我在模态中的最后一个元素和模态后面的下一个元素上创建了ng-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>

的Javascript

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();
         }
       }
     }
  }

Answer 5

不要使用任何需要您查找的解决方案＆＃34; tabbable＆＃34;元素。相反，在有效庄园中使用keydown和click个事件或背景。

您需要做的是使用window.keydown一般preventDefault()事件来停止显示模式时的所有标签，并使用keydown.tab stopPropagation()事件来处理标签对于模态。

您可以在类似的庄园中使用click个活动，或者您可以使用背景来防止点击其背后的元素。

对于Angular1，我想象这看起来与Asheesh Kumar的答案类似。您可以在此处查看我的Angular2-x解决方案：https://stackoverflow.com/a/46738489/1754995

陷阱焦点在带有角度的html容器中

5 个答案: