Question

我有一个带两个按钮元素的bootstrap模态。打开模态时，按钮会获得焦点，但是当我选择两次时，焦点会离开模态并转到主屏幕上的其他元素。

所以，我的问题是如何将标签焦点锁定在模态上，即第一个按钮上的标签，焦点应转到下一个按钮，第二个按钮上的标签应该将焦点恢复到第一个按钮上

我在其他问题中看到了类似的查询，他们要求将id用于我不想实现的标签。

以下是模式：

{{1}}

而且，我将来可能会有更多模态，我可以在模态上有更多元素。在那种情况下，我怎么能实现这个目标呢？

PS：我在一个带有typescript的Angular2框架中实现它。

Answer 1

您可以实施以下方法：

private tabKey(event: KeyboardEvent) {
        let parentModal = $(document).find('.modal');
        //List of html elements which can be focused by tabbing.
        let focusableElementsArrayString = 'a[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, [tabindex="0"]';
        let focusableElementsInModal = parentModal.find(focusableElementsArrayString);
        let numberOfElements = focusableElementsInModal.length;
        let firstTabElement = focusableElementsInModal[0];
        let lastTabElement = focusableElementsInModal[numberOfElements - 1];
        // Check for Shift + Tab
        if (event.keyCode === 9 && event.shiftKey) {
            if (document.activeElement === firstTabElement) {
                event.preventDefault();
                lastTabElement.focus();
            } // Check for Tab
        } else if (event.keyCode === 9) {
            if (document.activeElement === lastTabElement) {
                event.preventDefault();
                firstTabElement.focus();
            }
        }
    }

我甚至在代码中为你实现了shift +标签。希望有所帮助。

如何将标签焦点锁定在打字稿中的模态？

1 个答案: