jquery - 打开Fancybox-2后，将焦点发送到fancybox窗口

Question

为了便于访问，我尝试在 Fancybox 窗口打开后将焦点发送到该窗口中。

我在 Fancybox 的容器上添加了一个 tabindex 为 0 的值，并将焦点发送到它上面。这不起作用。

afterLoad: function() {
    this.group[this.index].content.attr('tabindex','0');
    this.group[this.index].content.focus();
}

我使用 NVDA(非可视化桌面访问)http://www.nvaccess.org/用于测试，但 Chrome 也可以显示焦点。

感谢您的帮助。

Answer 1

这很大程度上取决于内容的类型，但这应该可以解决问题(使用内联，ajax > 或 html 内容)

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

它对于单个或画廊元素应该同样有效。

参见JSFIDDLE (使用 Chrome 使其显而易见)

注意:我建议您使用 tabindex > 0 以避免 IE 出现问题(如果您关心跨浏览器兼容性)

编辑:这里有一个不同类型内容的示例: JSFIDDLE 其中焦点在图像或iframe

上不太明显

编辑2:更一般的做法是关注.fancybox-inner选择器，无论内容类型如何

$(".fancybox-inner").attr("tabindex",1).focus();

查看更新 JSFIDDLE 但想知道这是否适合您的目的