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

Question

我正在构建一个可访问的网站,并试图管理焦点.我需要打开一个模态,然后将焦点放在模态中的第一个元素上,然后捕获焦点,直到模态关闭("取消"或"接受").

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

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

这里： https: //docs.angularjs.org/api/ng/directive/ngBlur

示例： http: //jsbin.com/hemaya/1/edit?html,js ,output

由于 ng-blur 语句，您无法选择第二个输入框