Un textarea qui grandit automatiquement

http://www.unwrongest.com/projects/elastic/

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 :

14 commentaires

  1. 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.

    1. 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!!

  2. 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!!!

  3. 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.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *