TextArea qui s’ajuste automagiquement (avec JQuery/JavaScript)

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 :

[cc lang= »javascript »]
$(‘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
});
[/cc]

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 :

[cc lang= »html » no_links= »true »][/cc]

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 » 😉

1 commentaires On TextArea qui s’ajuste automagiquement (avec JQuery/JavaScript)

Laisser un message :

Votre adresse courriel ne sera pas publiée avec votre message. C'est confidentiel. :-)

Site Footer

Sliding Sidebar

Sur les réseaux…

Abonnez-vous par courriel

Saisissez votre adresse e-mail pour recevoir une notification pour chaque nouveau billet.

Hébergement wordPress par