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

我的指令如下。

Directive

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