Elastic, un plugin JQuery bien pratique : Il va permettre de faire s’étendre un textarea un peu à la mode facebook ou sms de l’iphone.
Le fonctionnement est simple, il suffit d’inclure JQuery à ses page, ainsi que le plugin elastic :
<script src="dependencies/jquery.js" type="text/javascript" charset="utf-8"></script> <script src="jquery.elastic.source.js" type="text/javascript" charset="utf-8"></script>
Puis de rajouter une sorte de routine qui va « écouter » tous les textareas pour les rendre elastiques :
<script type="text/javascript"> // <![CDATA[ $(document).ready(function(){ $('textarea').elastic(); }); // ]]> </script>
Ce qui donne :
comment faire pour que la textarea s’aggrandisse automatiquement en fontion du texte contenu (sans la scrollbar)?
Merci
Bonjour,
Je ne suis pas sûr de saisir la question, puisque c’est bien l’objet de ce billet…?
En fait j’ai fait la meme chose mais lorsque le texte est trop grand, la textarea ne s’agrandi pas
Vous auriez un exemple de page pour voir le code, si je peux aider ?
merci j’ai finalement réussi mais maintenant mon problème c’est la ligne en trop au premier affichage.
Savez vous comment régler ce problème je vois que c’est le même sur cette page.
En fait la « textearea » affiche une ligne vide en plus dans un premier temps et lorsque qu’on clique dedans et ensuite en dehors, elle s’adapte alors au texte. J’aimerais que la mienne soit directement adapté au texte sans la ligne en plus.
Merci d’avance pour vôtre réponse.
Là, je ne vois vraiment pas… Aucune ligne en trop n’apparaît chez moi, et je n’ai jamais rencontré ce type de problème. Vous avez un exemple en ligne?
je parle de l’espace vide en dessous du texte de la textarea, pour moi ca fais la meme chose sur vôtre page
Bonjour!!moi aussi j’ai le même problème!!quand je tape quelque chose sur le textarea, la ligne vide blanche descend si vite. Est-ce qu’on pourrait nous aider un peu!!?
Merci d’avance!!!
Bonjour Erick,
Bien sur qu’on peut vous aider, mais il faut m’aider à aider… Je ne vois pas de problème à vrai dire, et ne constate aucune ligne en trop. Du coup difficile de filer un coup de main sur un plugin que je n’ai pas créé sans exemple de ce qui ne va pas.
En revanche, je constate bien qu’une ligne supplémentaire apparait au focus et après avoir saisi une lettre, probablement le créateur a-t-il voulu rajouter de l’espace visuel dans la zone de saisie, et je salue cette idée.
Est-ce cela qui pose problème? Cet espace disparait quand le focus quitte le textarea. Si vraiment il gêne, il suffit d’utiliser la propriété rows du tag textarea, et de le diminuer.
Merci beaucoup pour l’aide!mais jusqu’ici rien n’est encore résolu!! Le vrai problème c’est que lorsque je tape 2 ou 3 mots et que la ligne n’est pas encore pleine, la ligne du textarea descend d’une ligne et ça se multiplie à chaque fois que l’on tape. C’est ce qui est trop génant du point de vue design car l’espace blanc est trop volumineux.
Encore Merci!!
Tu dois avoir un conflit avec quelque chose, js ou css. Essaie de voir sur ce Fiddle : http://jsfiddle.net/janjarfalk/r3Ekw/
Est-ce que quand tu enlève le focus l’espace disparait ?
Savez-vous comment faire pour décaler le contenu de la page vers le bas au fur et à mesure que le texte grandit?
Merci.
Alexander
Hello,
Alors ça… Ma première idée irait à une sorte de listener sur la taille du textarea, qui décalerait la page d’autant.