javascript - 如何强制将焦点放在网页上的模态框上

Question

TL;DR;

有没有办法强制焦点在网页的模式框内？

问题是:我有一个经典网页，包含文本、链接和表单。当我单击页面中的一个特定链接时，会出现一个模式框(类似于 fancybox 或 jQuery.ui.dialog)。此模式还包含链接和表单元素。如果用户使用它的 “tab” 键，他可以聚焦页面上的每个元素，包括模式内部的元素，以及模式外部的元素。我想强制焦点在模态框内说，但我找不到办法做到这一点。如果可能，我想在 CSS 或 JavaScript 中执行此操作。

我知道这是可能的，因为 jQuery.ui.dialog 可以使用 modal 选项来做到这一点，这里有一个例子 http://jsfiddle.net/pomeh/QjLJk/1/show/ .我试图查看源代码，但我没有弄清楚它是如何工作的。这是我在 jQuery UI 源代码中找到的一些代码，听起来可以解决这个问题:

this.document.bind( "focusin.dialog", function( event ) {
    if ( !that._allowInteraction( event ) ) {
        event.preventDefault();
        $(".ui-dialog:visible:last .ui-dialog-content")
            .data( widgetFullName )._focusTabbable();
    }
});

_allowInteraction: function( event ) {
    if ( $( event.target ).closest(".ui-dialog").length ) {
        return true;
    }

    // TODO: Remove hack when datepicker implements
    // the .ui-front logic (#8989)
    return !!$( event.target ).closest(".ui-datepicker").length;
},

_focusTabbable: function() {
    // Set focus to the first match:
    // 1. First element inside the dialog matching [autofocus]
    // 2. Tabbable element inside the content element
    // 3. Tabbable element inside the buttonpane
    // 4. The close button
    // 5. The dialog itself
    var hasFocus = this.element.find("[autofocus]");
    if ( !hasFocus.length ) {
        hasFocus = this.element.find(":tabbable");
    }
    if ( !hasFocus.length ) {
        hasFocus = this.uiDialogButtonPane.find(":tabbable");
    }
    if ( !hasFocus.length ) {
        hasFocus = this.uiDialogTitlebarClose.filter(":tabbable");
    }
    if ( !hasFocus.length ) {
        hasFocus = this.uiDialog;
    }
    hasFocus.eq( 0 ).focus();
}


keydown: function( event ) {
    if ( this.options.closeOnEscape && !event.isDefaultPrevented() && event.keyCode &&
            event.keyCode === $.ui.keyCode.ESCAPE ) {
        event.preventDefault();
        this.close( event );
        return;
    }

    // prevent tabbing out of dialogs
    if ( event.keyCode !== $.ui.keyCode.TAB ) {
        return;
    }
    var tabbables = this.uiDialog.find(":tabbable"),
        first = tabbables.filter(":first"),
        last  = tabbables.filter(":last");

    if ( ( event.target === last[0] || event.target === this.uiDialog[0] ) && !event.shiftKey ) {
        first.focus( 1 );
        event.preventDefault();
    } else if ( ( event.target === first[0] || event.target === this.uiDialog[0] ) && event.shiftKey ) {
        last.focus( 1 );
        event.preventDefault();
    }
}

Answer 1

我不会深入编码，因为您已经有了代码，我将向您解释其背后的逻辑。

如果你的页面有以下元素，

element0(tabindex 1) --> element1(tabindex 2) --> element2(tabindex 3)

为了防止焦点外出，您基本上创建了一个循环。

当在 element0 上按下 Tab 键时，它将像往常一样转到 element1。

但是当在 element2 上按下 tab 键时，您需要阻止浏览器的默认行为(通过 event.preventDefault())，即转到具有更高 tabindex 的元素并将焦点放在 element0 上。

同样的方法，在 element0 上按下 shift+ tab 时，您需要阻止浏览器的默认行为(event.preventDefault())并手动将焦点赋予 element2。

通过这种方式，您可以创建一个循环，使焦点永远不会外出。