使用 angular 在 html 容器中捕获焦点

焦点

关注

发信

关注(28)粉丝(399)

使用 angular 在 html 容器中捕获焦点

本文介绍了使用 angular 在 html 容器中捕获焦点的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

HTML

<a href="" ng-click="modalshow = !modalshow; modal.open();">Open Modal</a><div ng-show="modalshow" id="modal"><h3 id="tofs" >服务条款</h3><p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum </p><span>取消</span><span>接受/跨度>

<h2>分离内容</h2>

Javascript

angular.module('app').controller('Controller', modalCtrl);功能模态Ctrl(){$scope.modal = {打开:函数(){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();}});

当模态可见时，您可以添加此代码以将所有焦点事件捕获到 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.

这篇关于使用 angular 在 html 容器中捕获焦点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

11-02 01:36