javascript - Trap focus in html container with angular - Stack Overflow

admin管理员组

文章数量:1342908

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

       }
     }
  }

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

       }
     }
  }

• javascript
• angularjs
• angularjs-directive
• angularjs-scope
• focus

Share Improve this question Follow asked Jul 2, 2015 at 19:57 im_bentonim_benton 2,62144 gold badges2323 silver badges3030 bronze badges

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 2

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.

There's a directive called ngBlur, that fires an event when an element loses focus. Try executing your focus function on ng-blur

Here: https://docs.angularjs/api/ng/directive/ngBlur

An example: http://jsbin./hemaye/1/edit?html,js,output

You cannot ever select the 2nd input box because of the ng-blur statement

There is multiple possibility to trap the focus.

One solution is to manually set tabindex="-1" temporarily on all the elements in the background of your modal when it is showed (and remove this tabindex, or revert to original tabindex when leaving modal).

Another solution is to look at how angular-bootstrap plan to fix this issue : https://github./angular-ui/bootstrap/issues/738

You can also look at the WAI ARIA page, they have a related content about it : http://www.w3/TR/wai-aria-practices/#trap_focus_div

Okay after way too much searching, this is what I came up with. Basically I created ng-focus functions on the last element in the modal and the next element following the modal. This way I could check if the focus existed within the modal and if not, I would loop the focus back to the top.

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

Don't use any solution requiring you to look up "tabbable" elements. Instead, use keydown and either click events or a backdrop in an effective manor.

What you need to do is have a general window.keydown event with preventDefault() to stop all tabbing when the modal is displayed and a keydown.tab event with stopPropagation() to handle tabbing for the modal.

You can use click events in a similar manor or you can just use a backdrop to prevent clicking elements behind it.

For Angular1, I'd imagine this would look similar to Asheesh Kumar's answer. You can see my Angular2-x solution here: https://stackoverflow./a/46738489/1754995

本文标签： javascriptTrap focus in html container with angularStack Overflow