Question

我曾经在以前版本的fancybox中使用onComplete功能将焦点设置到fancybox（以使使用键盘的人更容易访问网站）。

似乎fancybox 2没有遵循相同的语法。是否有人能够提供一些代码，以便在渲染后将焦点设置为fancybox？

曾经是：

$(".fancybox-call").fancybox({
               padding:   20, 
        fitToView   : false,
        width       : 960,
        height      : 615,
        autoSize    : false,
        closeClick  : false,
        openEffect  : 'none',
        closeEffect : 'none',
                type                : 'inline',
                onComplete : function () {
                                          $(".fancybox-wrap").focus();
                                }
});

现在尝试：

$('a#feedback-button').each(function(){
    $(this).fancybox({
            padding     : 0,
            fitToView   : false,
            width       : 700,
            height      : 820,
            autoSize    : false,
            closeClick  : false,
            openEffect  : 'none',
            closeEffect : 'none',
            type        : 'iframe',
            scrolling   : 'no',
            beforeShow   : function() {
                             $(".fancybox-inner").focus();
                        }
    });

没有运气。

在没有将焦点设置为fancybox的情况下，键盘用户必须在整个调用页面中进行制表，然后才能访问fancybox中的表单。

Answer 1

从Fancybox 2.1.4开始，关闭按钮是一个锚点，不再是div标签，所以我只设置此代码以关闭关闭按钮：

afterShow: function(){
    $('.fancybox-close').focus();
}

我还更改了密钥配置以删除由回车键触发的下一个链接，因此输入密钥将关闭Fancybox：

keys  : {
    next : {
        34 : 'up',   // page down
        39 : 'left', // right arrow
        40 : 'up'    // down arrow
    },
    prev : {
        33 : 'down',   // page up
        37 : 'right',  // left arrow
        38 : 'down'    // up arrow
    },
    close  : [27], // escape key
    play   : [32], // space - start/stop slideshow
    toggle : [70]  // letter "f" - toggle fullscreen
},

Answer 2

以下内容应添加到fancybox调用中。它适用于所有内容（内联，ajax或html）

afterShow: function () {
    $(this.content).attr("tabindex",1).focus()
}

所以fancybox调用应该是这样的。

$(".your_element_class").fancybox({
    afterShow: function () {
        $(this.content).attr("tabindex",1).focus()
    }
});

请更改＆＃34; your_element_class＆＃34;到您调用fancybox的html元素的类。

将焦点设置为fancybox 2

2 个答案: