J’ai cherché un peu pour trouver un plug-in pas trop lourd et qui fonctionnait bien pour rendre les boîtes de texte (textarea) automatiquement allongeables (comme sur Facebook). Je n’en ai pas trouvé des très bien qui n’utilisaient pas des librairies JavaScript (comme jQuery ou prototype).
La plupart qui n’en utilisaient pas ne fonctionnaient pas tout à fait, car elles comptaient le nombre de caractères, mais puisque la plupart des fonts ont des caractères de largeur différente…
Plugin autoResize pour JQuery
Bref, puisque jQuery était déjà utilisé sur notre blogue, je me suis ravisé. J’ai trouvé ce plug-in, autoResize, de James Padolsey, dont le comportement est très bien, voire identique à celui de la boîte de Facebook. D’ailleurs, il ne pèse qu’un peu plus de 1k. Vous pouvez même ajouter des « animations » ou n’importe quoi, en fait, en javascript pendant que la boîte de texte s’allonge (changer la couleur de la boîte de texte, du texte…).
Exemple
Pour voir le « plug-in » autoResize en action, vous pouvez :
Exemple de code JavaScript (JQuery + plugin)
Voici un exemple de code pris du site :
$('textarea#comment').autoResize({
// Lorsque la boîte s'allonge :
onResize : function() {
$(this).css({opacity:0.8});
},
// Après :
animateCallback : function() {
$(this).css({opacity:1}); // on rend la boîte plus pâle
},
// Durée de l'animation
animateDuration : 300,
// Combien on ajoute d'espace entre la fin de la boîte et le texte :
extraSpace : 40
});
Le code textarea#comment au début représente l’id du tag « textarea » que vous avez dans votre page. Dans cet exemple, la boîte de texte devra avoir « comment » comme id, comme ceci :
<textearea id="comment"></textarea>
Pour ma part, j’ai retiré la partie qui change la transparence, car ca changeait la couleur du texte également, ça fait un peu étrange…
Résumé
Vous aurez donc besoin de :
Voilà! Bon « jQuery » 
Commentaires récents