hauteur de réglage de la zone de texte basé sur le texte à l'intérieur de celui-ci en utilisant jQuery

Question

J'ai un élément <textarea> dans ma forme qui a ce code attaché à lui:

$('#links').focusin(function() { 
    $('#links').animate({ 
     height: '100px' 
    }, 300, function() { 
     // done 
    }); 
}); 

Cela fonctionne parfaitement, lorsque la zone de texte se focaliser augmente bien en hauteur à 100px. Maintenant, je veux qu'il rétrécisse à une taille appropriée basée sur le texte à l'intérieur quand il perd le focus. J'ai écrit ceci:

$('#links').focusout(function() { 
    $('#links').animate({ 
     height: 'auto' 
    }, 300, function() { 
     // done 
    }); 
}); 

Mais cela ne fonctionne pas, il reste juste à la même hauteur (100px). Est-ce qu'il y a un moyen de faire ça?

Merci. :)

Éditer: Pour sauver une certaine confusion, le même gestionnaire pour $('#links').focusout fonctionne très bien, c'est la première chose que j'ai testé. Donc je suppose que c'est un problème avec l'animation ou la propriété CSS.

Answer 1

Essayez $('#links').blur(function(){ ... }) à la place

http://api.jquery.com/blur/

---

Modifier, votre code actuel:

$('#links').blur(function() { 
$('#links').animate({ 
    height: 'auto' 
}, 300, function() { 
    // done 
}); 
}); 

---

D'autres notes .. Vous pouvez utiliser $ ('#links') .focus() au lieu de focusin, et aussi, une fois que vous êtes dans la fonction, vous pouvez utiliser $ (this) .animate(), un s un raccourci. Juste de petites astuces et autres joyeusetés.

Answer 2

auto_height_link = $('#links').css('height'); 
$('#links').focusin(function() { 
    $(this).animate({ 
     height: '100px' 
    }, 300, function() { 
     // done 
    }); 
}).focusout(function() { 
    $(this).animate({ 
     height: auto_height_link 
    }, 300, function() { 
     // done 
    }); 
}); 

mais de toute façon le Animer ne marche pas lire la valeur auto css pour la hauteur

je suis tombé sur ce http://www.unwrongest.com/projects/elastic/ qui est ce que vous avez besoin, je suppose

Answer 3

Ce n'est pas tout à fait la même chose que ce que vous » re faire, mais assez similaire: http://james.padolsey.com/javascript/jquery-plugin-autoresize/

Answer 4

Vous ne pouvez pas utiliser l'animation automatique dans jQuery. Vous devriez le régler sur auto, puis obtenir la hauteur réelle (en px) et enfin l'animer.

Jetez un oeil here