不能聚焦fancybox iframe輸入

Question

所以我使用fancybox來加載一個登錄iframe，我想它onComplete把焦點帶到用戶名字段。如果有人可以看看這段代碼，讓我知道什麼是錯的，那會很棒。

Gracias。

/* 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

，或者乾脆在你的實際登錄頁面的$(document).ready();添加$('#login_username').focus();。

Answer 2

如果你沒有使用iframe，那麼這些可能不適合你。我們設置了我們的fancybox來定位包含在頁面上隱藏div的div。

對$（document）.ready（）上的隱藏元素調用focus（）不起作用。綁定到fancybox onComplete事件不起作用，因爲該事件是在頁面加載時觸發的，而不是當fancybox實際顯示時觸發的。

最後，我們的工作是綁定到fancybox錨的mouseleave事件。因此，像：

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