angular - 如何限制模态框中的 Tab 键？

Question

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

当它处于活动状态时，用户仍然可以按 Tab 键关注后台的链接和按钮，其中一些有下载链接。当这些链接被关注并且用户按下回车键时，下载操作就会发生。

有没有办法在模式窗口处于活动状态时禁用背景选项卡？

我正在使用以下版本：

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

Answer 1

由于最新的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的帮助下创建了这个指令

Answer 2

您应该在背景页面上使用一个类，该类在pointer-events: none;模式启动时有一个。只需使用 ngClass，它就可以在单击 .btn 时动态更改，并在模态关闭事件上进行切换。