Question

当您单击.btn链接时，我会弹出一个模态窗口。

当它处于活动状态时，用户仍然可以按Tab键以关注后台的链接和按钮，其中一些链接和按钮具有下载链接。当关注这些链接并按下用户输入键时，下载操作将被取消。

当模态窗口处于活动状态时，有没有办法禁用背景Tab？

我使用的是以下版本：

https://valor-software.com/ngx-bootstrap/#/modals（V2.4）， Angular CLI 1.6

Answer 1

你应该在背景页面上使用一个类，当模态启动时它有一个pointer-events: none;。只需使用ngClass，就可以在点击你的.btn时动态更改，并在模态结束事件上切换。

Answer 2

由于最新的 ngx-bootstrap（v2.4）没有修复，我创建了一个指令来捕捉模式框本身的tab键焦点。

我使用的Angular版本是Angular 5

我的指示如下。

指令

import {Directive, ElementRef, HostListener} from '@angular/core';
@Directive({
    selector: '[appSdbModalFocus]'
})
export class SdbModalFocusDirective {
    KEYCODE_TAB: number = 9;

    constructor(
        private hostElement: ElementRef
    ) {}

    ngOnInit() {}

    @HostListener("keydown", ["$event"])
    onKeyDown(e: KeyboardEvent): any {
        if (e.key === 'Tab' || e.keyCode === this.KEYCODE_TAB) {
            let focusableEls = this.hostElement.nativeElement;
            let modalContent = $(focusableEls).find('a, :input, [tabindex]');
            var firstFocusableEl = modalContent.first()[0];
            var lastFocusableEl = modalContent.last()[0];

            if (e.shiftKey) /* shift + tab */ {
                this.log(firstFocusableEl, lastFocusableEl, document);
                if (document.activeElement === firstFocusableEl) {
                    lastFocusableEl.focus();
                    e.preventDefault();
                }
            } else /* tab */ {
                this.log(firstFocusableEl, lastFocusableEl, document);
                if (document.activeElement === lastFocusableEl) {
                    firstFocusableEl.focus();
                    e.preventDefault();
                }    
            }
        }
    }
}

HTML

<form appSdbModalFocus>
...
</form>

在trap-focus-in-an-element

的帮助下创建了此指令

如何在模态框中限制Tab键？

2 个答案: