打开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(NonVisual Desktop Access)http://www.nvaccess.org/进行测试,但Chrome也可以显示焦点.

谢谢你的帮助.

Answer 1

它非常依赖于type的content,但这应该做的伎俩(使用inline,ajax或html内容)

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

对于单个或库元素,它应该同样有效.

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

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

编辑:这里有不同类型的内容的例子:的jsfiddle这里focus是不是太明显的图像或I帧

编辑2:更一般的东西将关注.fancybox-inner选择器,无论内容的类型如何

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

请参阅更新的JSFIDDLE,但想知道它是否适用于您的目的