Pourquoi jquery.animate sur une zone de texte fait disparaître le curseur clignotant?

Question

J'ai le code suivant

$(document).ready(function() { 
    $("#myTextArea").focus(function() { 
     $("#myTextArea").animate({ "height": "75px"}, "normal"); 
     return false; 
    }); 

pour développer une zone de texte quand il obtient le focus. L'expansion se produit, mais le curseur clignotant disparaît, au moins dans Firefox!

Modifié: La zone de texte est toujours focalisée et je peux taper dessus.

Pourquoi cela se produit-il? Y a-t-il un moyen de le montrer à nouveau?

Merci à l'avance

Answer 1

Votre déclaration return false annule l'action focus :) Vous obtenez seulement un curseur lorsque l'élément est concentré, je venais de supprimer cette ligne de votre fonction.

En dehors de cela, .focus() dans une zone de texte n'est pas quelque chose que vous pouvez récupérer facilement, car il avait une position qui importe, vous êtes mieux coller avec un changement CSS ici:

$("#myTextArea").focus(function() { 
    $(this).css({ "height": "75px" }); 
}); 

Cette n'affectera pas du tout le comportement du curseur et fonctionnera avec les navigateurs saema cross (focus est toujours différent parmi les navigateurs), mais bien sûr, ne sera pas animé. L'alternative (je ne l'ai pas testé ce dans tous les navigateurs) est que vous pouvez déclencher à nouveau la mise au point avec les mêmes args après l'Animer, la restauration de la position, comme ceci:

$("#myTextArea").focus(function(e) { 
    if($(this).height() == 75) return; 
    $(this).animate({ height: 75}, "normal", function() { 
     $(this).blur().trigger(e); 
    }); 
});​ 

You can test this from here, juste être sûr de vérifier tous les navigateurs, comme focus le comportement peut varier légèrement entre eux.