Question

所以我使用fancybox来加载登录iframe，我希望它能在onComplete中将焦点带到用户名字段。如果有人可以看看这段代码，让我知道什么是错的，那就太好了。

格拉西亚斯。

/* Function to resize the height of the fancybox window */
(function($){ $.fn.resize = function(width, height) { 
if (!width || (width == "inherit")) inner_width = parent.$("#fancybox-inner").width();
if (!height || (height == "inherit")) inner_height = parent.$("#fancybox-inner").height();
inner_width = width;
outer_width = (inner_width + 14);
inner_height = height;
outer_height = (inner_height + 14);
parent.$("#fancybox-inner").css({'width':inner_width, 'height':inner_height});
parent.$("#fancybox-outer").css({'width':outer_width, 'height':outer_height});
}
})(jQuery);

$(document).ready(function(){

var pasturl = parent.location.href;

$("a.iframe#register").fancybox({
    'transitionIn'          :   'fade',
    'transitionOut'         :   'fade',
    'speedIn'                       : 600,
    'speedOut'                  : 350,
    'width'                         : 450,
    'height'                        : 385,
    'scrolling'                 : 'no',
    'autoScale'                 : false,
    'autoDimensions'        : false,
    'overlayShow'               : true,
    'overlayOpacity'        : 0.7,
    'padding'                       : 7,
    'hideOnContentClick': false,
    'titleShow'                 : false,
    'onStart'                       : function() {
                                                    $.fn.resize(450,385);
                                                },
    'onComplete'                : function() {
                                                    $("#realname").focus();
                                                },
    'onClosed'                  : function() {
                                                    $(".warningmsg").hide();
                                                    $(".errormsg").hide();
                                                    $(".successfulmsg").hide();
                                                }
});

$("a.iframe#login").fancybox({
    'transitionIn'          :   'fade',
    'transitionOut'         :   'fade',
    'speedIn'                       : 600,
    'speedOut'                  : 350,
    'width'                         : 400,
    'height'                        : 250,
    'scrolling'                 : 'no',
    'autoScale'                 : false,
    'overlayShow'               : true,
    'overlayOpacity'        : 0.7,
    'padding'                       : 7,
    'hideOnContentClick': false,
    'titleShow'                 : false,
    'onStart'                       : function() {
                                                    $.fn.resize(400,250);
                                                },
    'onComplete'                : function() {
                                                    $("#login_username").focus();
                                                },
    'onClosed'                  : function() {
                                                    $(".warningmsg").hide();
                                                    $(".errormsg").hide();
                                                    $(".successfulmsg").hide();
                                                }
});

$("#register").click(function() {
    $("#login_form").hide();
    $(".registertext").hide();
    $.fn.resize(450,385);
    $("label").addClass("#register_form label");
});

$("#login").click(function() {
    $.fn.resize(400,250);
    $("label").addClass("#login_form label");
});

$("#register_form").bind("submit", function() {
    $(".warningmsg").hide();
    $(".errormsg").hide();
    $(".successfulmsg").hide();
    if ($("#realname").val().length < 1 || $("#password").val().length < 1 || $("#username").val().length < 1) {
        $("#no_fields").addClass("warningmsg").show().resize(inherit,405);
        return false;
    }
    if ($("#password").val() != $("#password2").val()) {
        $("#no_pass_match").addClass("errormsg").show().resize();
        return false;
    }

    $.fancybox.showActivity();

    $.post(
        "../../submit.php",
        { realname:$('#realname').val(),
          email:$('#email').val(),
          username:$('#username').val(),
          password:MD5($('#password').val()),
          rand:Math.random() }
        ,function(data){
            if(data == "OK"){
                $(".registerbox").hide();
                $.fancybox.hideActivity();
                $.fn.resize(inherit,300);
                $("#successful_login").addClass("successfulmsg").show();
            }
            else if(data == "user_taken"){
                $.fancybox.hideActivity();
                $("#user_taken").addClass("errormsg").show().resize(inherit,405);
                $("#username").val("");
            }
            else {
                $.fancybox.hideActivity();
                document.write("Well, that was weird. Give me a shout at webmaster@criticalwire.com.");
            }
            return false;
        });

    return false;
});

$("#login_form").bind("submit", function() {
        $(".warningmsg").hide();
        $(".errormsg").hide();
        $(".successfulmsg").hide();
        if ($("#login_username").val().length < 1 || $("#login_password").val().length < 1) {
            $("#no_fields").addClass("warningmsg").show().resize(inherit,280);
            return false;
        }

        $.fancybox.showActivity();

        $.post(
            "../../admin/users/login_submit.php",
            { username:$('#login_username').val(),
              password:MD5($('#login_password').val()),
              rand:Math.random() }
            ,function(data){
                if(data == "authenticated"){
                    $(".loginbox").hide();
                    $(".registertext").hide();
                    $.fancybox.hideActivity();
                    $("#successful_login").addClass("successfulmsg").show();
                    parent.document.location.href=pasturl;
                }
                else if(data == "no_user"){
                    $.fancybox.hideActivity();
                    $("#no_user").addClass("errormsg").show().resize();
                    $("#login_username").val("");
                    $("#login_password").val("");
                }
                else if(data == "wrong_password"){
                    $.fancybox.hideActivity();
                    $("#wrong_password").addClass("warningmsg").show().resize();
                    $("#login_password").val("");
                }
                else {
                    $.fancybox.hideActivity();
                    document.write("Well, that was weird.");
                }
                return false;
        }); 
    return false;
});

});

这是HTML：

<p><a class="iframe" id="login" href="/login/">Login</a></p>

Answer 1

您可以尝试：

$('#fancybox-frame').contents().find('#login_username').focus();

在您的onComplete中，或只是在实际登录页面的$('#login_username').focus();中添加$(document).ready();。

Answer 2

如果您没有使用iframe，那么这些可能对您不起作用。我们设置了我们的fancybox来定位一个div，它包含在页面上隐藏的div中。

在$（document）.ready（）上的隐藏元素上调用focus（）不起作用。绑定到fancybox onComplete事件不起作用，因为事件是在页面加载时触发的，而不是在实际显示fancybox时。

最后，对我们有用的是绑定到fancybox锚点的mouseleave事件。如下所示：

$(document).ready(function () { $('#LoginLink').mouseleave(function () { $('#UserName').focus(); }); });

无法关注fancybox iframe输入

2 个答案: