Html 如何在typescript中将选项卡焦点锁定在模态上？

我有一个带两个按钮元素的引导模式。当模式打开时，按钮获得焦点，但当I选项卡两次时，焦点离开模式并转到主屏幕上的其他元素

因此，我的问题是如何将tab焦点锁定在模式上，即，在第一个按钮上按tab键，焦点应转到下一个按钮，在第二个按钮上按tab键，焦点应回到第一个按钮上

我在其他问题中看到过类似的查询，他们要求对我不想实现的标记使用ID

以下是模式：

<div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Are you sure?</h4>
            </div>
            <div class="modal-body">
                warning
            </div>
        <div class="modal-footer ok-cancel">
           <button type="button" class="btn btn-primary" (click)="delete()" data-dismiss="modal">Delete</button>
            <button type="button" class="btn btn-default" (click)="cancel()">Cancel</button>
            </div>
        </div>
    </div>

你确定吗？
警告
删除
取消

而且，将来我可能会有更多的情态动词，在情态动词上有更多的元素。在这种情况下，我如何才能做到这一点

---

PS：我正在使用typescript在Angular2框架中实现此功能。

您可以实现以下方法：

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+选项卡。希望对您有所帮助。

您可以实现以下方法：

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+选项卡。希望有帮助。

听tab键，看看它是否来自模式中的最后一个输入，如果是，取消事件并将焦点设置在第一个输入上。向后检查

e.shiftKey

听tab键，看看它是否来自模式中的最后一个输入，如果是，取消事件并将焦点设置在第一个输入上。做同样的事情向后检查

e.shiftKey

不客气。很高兴我能帮忙！顺便说一句，还有几个可聚焦的元素，如area[href]、[contenteditable]。如果需要，可以在字符串中添加这些。干杯。如果您不想在这个脚本中使用jquery。您可以使用querySelector和querySelectorAll来获取parentModel和可聚焦元素。欢迎使用。很高兴我能帮忙！顺便说一句，还有几个可聚焦的元素，如area[href]、[contenteditable]。如果需要，可以在字符串中添加这些。干杯。如果您不想在这个脚本中使用jquery。您可以使用querySelector和querySelectorAll来获取parentModel和可聚焦元素。