在有容器的html容器陷阱重点 [英] Trap focus in html container with angular

问题描述

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

HTML

 < a href =ng-click =modalshow =！modalshow; modal.open（）; >打开模式< / a> 
< div ng-show =modalshowid =modal> 
< h3 id =tofs>服务条款< / h3> 
< p> Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum< / p> 
< span>取消< / span> 
< span> Accept / span> 
< / div> 
< h2> Seprate内容< / h2> 
  

Javascript

  angular.module（'app'）
 .controller（'Controller'，modalCtrl）; 
 
函数modalCtrl（）{
 $ scope.modal = {
 open：function（）{
 angular.element（'＃tofs'）。 ; 
 
 
 
 
 $ b 
解决方法
  angular.element（html）on（focusin，body，function（event）{
 if（angular.element （#modal：visible）。length> 0）{
 event.preventDefault（）; 
 event.stopPropagation（）; 
 angular.element（'＃tofs'）。focus ）; 
} 
}）; 
  
当模态可见时，您可以添加此代码以将所有焦点事件捕获到h3标记。 > 
I'm building an accessible website and trying to manage focus. I need to open a modal and then put focus on the first element in the modal then trap the focus until the modal is closed ("canceled" or "accepted").

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

       }
     }
  }

解决方案
angular.element("html").on("focusin", "body", function (event) {
   if(angular.element("#modal:visible").length>0){
       event.preventDefault();
       event.stopPropagation();
       angular.element('#tofs').focus();
   }
});
you can add this code to trap all focus events to h3 tag when modal is visible.

                        
这篇关于在有容器的html容器陷阱重点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！