Question

我无法将焦点设置在fancybox中表单的第一个输入元素上。我正在使用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（）;“永远不会被击中。

Answer 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()
    }
});

请更改＆＃34; your_element_class＆＃34;到您调用fancybox的html元素的类。另外，请确保您在表单字段中有正确的tabindex

在fancybox对话框中设置焦点

1 个答案: