Impossible de mettre en focus l'entrée iframe de fancybox

Question

J'utilise donc fancybox pour charger un iframe de connexion, et je voudrais que cela soit sur onComplete pour mettre le focus sur le champ du nom d'utilisateur. Si quelqu'un pouvait jeter un coup d'oeil à ce code et me dire ce qui ne va pas, ce serait génial.

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

}); 

Et voici le HTML:

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

Answer 1

Vous pouvez essayer:

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

dans votre onComplete, ou simplement ajouter une $('#login_username').focus(); dans un $(document).ready(); de votre page de connexion réelle.

Answer 2

Si vous n'utilisez pas d'iframe, cela peut ne pas fonctionner pour vous. Nous avons mis en place notre fancybox pour cibler une div qui est contenue dans un div caché sur la page. L'appel de focus() sur un élément masqué de $ (document) .ready() ne fonctionne pas. La liaison à l'événement onComplete de fancybox n'a pas fonctionné car l'événement a été déclenché au chargement de la page plutôt que lorsque la fancybox a été affichée. À la fin, ce qui fonctionnait pour nous se liait à l'événement mouseleave de l'ancre fancybox. Donc, quelque chose comme:

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