0

我无法将焦点设置在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();" 永远不会被击中。

4

1 回答 1

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

于 2017-03-02T23:12:46.713 回答