Auto élargir une zone de texte à l’aide de jQuery

Question

Comment puis-je faire un textarea étendre automatiquement à l’aide de jQuery ?

Answer 1

Si vous ne voulez pas un plugin, il y a une solution très simple

$("textarea").keyup(function(e) {
    while($(this).outerHeight() < this.scrollHeight + parseFloat($(this).css("borderTopWidth")) + parseFloat($(this).css("borderBottomWidth"))) {
        $(this).height($(this).height()+1);
    };
});

Le voir travailler dans un jsFiddle j'ai utilisé pour répondre à une autre textarea question ici.

Pour répondre à la question de le faire en sens inverse ou de la rendre plus petite que le texte est supprimé: jsFiddle

Et si vous NE voulez qu'un plugin

@Jason a conçu un ici

Answer 2

J'ai essayé des tas et celui-ci est grand. ^{Le lien est mort. Lire ci-dessous.}
Vous pouvez essayer en appuyant sur et maintenez la touche enter dans le textarea. Comparer l'effet avec les autres auto expansion textarea plugin....

edit basé sur les commentaires

$(function() {
   $('#txtMeetingAgenda').autogrow();
});

remarque: vous devez inclure le besoin de js fichiers...

Pour éviter la barre de défilement dans le textarea de clignoter et s'éteint durant l'expansion ou la contraction, vous pouvez définir l' overflow de hidden ainsi:

$('#textMeetingAgenda').css('overflow', 'hidden').autogrow()

---

Mise à jour:

Le lien ci-dessus est cassé. Mais vous pouvez toujours obtenir les fichiers javascript ici.

Answer 3

Augmente / diminue textarea. Cette démo utilise jQuery pour la liaison de l’événement, mais il n’est pas un must en quelque sorte.
(aucune prise en charge de l’IE - IE ne répond pas au changement d’attribut lignes )

[PAGE DE DÉMONSTRATION

](http://codepen.io/vsync/pen/frudD)

---

HTML

CSS

JavaScript (actualisé)

Answer 4

<ul> <li><a href="http://plugins.jquery.com/project/autogrow" rel="nofollow"><strong>Auto de plus en plus Textareas</strong></a></li> <li><a href="http://www.jacklmoore.com/autosize/" rel="nofollow"><strong>jQuery Autosize</strong></a></li> </ul>

Answer 5

J’ai eu un moyen très simple de le faire, avec jQuery.

Fonctionne très bien avec presque tous les navigateur (

Vous pouvez obtenir une solution bien décrite ici.

j’ai mis à jour la réponse à se développer tout en travaillant à `` et le flou, il obtiendra la taille selon la teneur en it.