在 fancybox 对话框中设置焦点答案

【问题标题】：setting focus in fancybox dialog在 fancybox 对话框中设置焦点
【发布时间】：2013-07-01 22:36:31
【问题描述】：

我无法将焦点设置在精美框中表单的第一个输入元素上。我正在使用通过内部插件加载的 WordPress 3.5.2 和 fancybox 2.1.3。

我认为我不明白 DOM 中正确设置焦点的路径。

在标记为“fancybox-hidden”的 div 内有两种形式。每个表单都在一个带有唯一 ID 的 div 中。通过单击锚点打开表单。每次单击锚点时都会显示相应的对话框。

打开对话框的锚点如下：

<a href="#login-form" class="fancybox" id="show-logon">Sign On To Your Account</a><br>
<a href="#register-form" class="fancybox" id="show-register">Create A New Account</a>

下面是页面底部的js代码：

<script type="text/javascript">// <![CDATA[
jQuery(document).ready(function(){

    jQuery('a#show-login').fancybox({
        'afterLoad' : function(){
            jQuery('#user_login').focus();
        }
    });

    jQuery('a#show-register').fancybox({
        'afterLoad' : function(){
            jQuery('#user_name').focus();
        }
    });
  // ]]</script>

在 afterLoad 函数内的 jQuery 调用中引用的 id 确实存在。在 Firebug 中设置断点会显示“jQuery('a#show-login').fancybox(”调用已处理，并且似乎属性“afterLoad”也是如此。但是，在“jQuery(”处的匿名函数中设置了断点#user_login').focus();" 永远不会被击中。

【问题讨论】：

好吧，你必须确定你是否使用了 fancybox 2，因为onComplete 不是一个有效的 API 选项。尝试改用afterShow（如果您使用的是fancybox WP插件，很可能是v1.3.4）
谢谢，肯尼迪。我确实验证了版本并根据需要编辑了第一段。
根据 JFK 的观察，我修改了代码以使用“afterLoad”而不是“onComplete”。此更改不会在控制台中引发错误，但不会命中在 .focus 调用处设置的断点。
此外，将 jQuery().fancybox 函数的目标从 'a#show-login' 更改为 'div#login-form' 不会导致在 ' 中的断点处命中afterLoad'函数。

标签： jquery wordpress fancybox-2

【解决方案1】：

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

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

fancybox 调用应该是这样的。

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

请将“your_element_class”更改为您调用fancybox 的html 元素的类。还要确保您的表单字段中有正确的 tabindex

【讨论】：