La taille de la base de texte est basée sur le contenu js ou jquery

Cela peut aider. Ils sont tous deux les plugins jQuery.

• JQuery Elastic
• Zone flexible
• Autogrow

modifier

 var $textArea = $("#textarea-container"); resizeTextArea($textArea); $textArea.off("keyup.textarea").on("keyup.textarea", function() { resizeTextArea($(this)); }); function resizeTextArea($element) { $element.height($element[0].scrollHeight); }​ 

Cette réponse a été fournie par François Wahl, ci-dessous.

Supprimez la hauteur codée et donnez à votre textarea un identifiant:

 <textarea id="textarea-container"> Line 1 Line 2 Line 3 Line 4 </textarea>​ 

En utilisant jQuery, vous pouvez utiliser ce qui suit pour redimensionner automatiquement au chargement de la page, puis sur l'événement keuUp comme mentionné précédemment.

 var $textArea = $("#textarea-container"); // Re-size to fit initial content as it is pre-loaded. resizeTextArea($textArea); // Remove this binding if you don't want to re-size on typing. $textArea.off("keyup.textarea").on("keyup.textarea", function() { resizeTextArea($(this)); }); function resizeTextArea($element) { $element.height($element[0].scrollHeight); }​ 

Voir DEMO

Sinon, si tout ce que vous voulez, affichez-le et supprimez le rembourrage de ligne par défaut, utilisez ceci:

 var $textArea = $("#textarea-container"); var nativeRowPadding = 15; // Re-size to fit initial content. resizeTextArea($textArea); function resizeTextArea($element) { $element.height($element[0].scrollHeight-nativeRowPadding ); }​ 

Voir DEMO

Pour vous assurer que toutes vos zones de texte respectent leur contenu, augmentent ou diminuent la taille pendant que vous tapez, utilisez ce qui suit:

 $("textarea").on("input",function(){ $(this).height("auto").height($(this)[0].scrollHeight); } 

Il serait utile d'installer cette ligne de code sur SO lui-même 🙂

Support de bibliothèque textuelle multiple. Basé sur @ François réponse. Demo Fiddle

 if ($(".textarea").length > 0) { $(".textarea").each(function () { resizeTextArea($(this)); $(this).off("keyup.textarea").on("keyup.textarea", function () { resizeTextArea($(this)); }); }); } function resizeTextArea($element) { $element.height($element[0].scrollHeight); } 

 <textarea id='myText'></textarea> var obj=document.getElementById('myText'); obj.onkeyup=function(){ if(obj.scrollHeight>obj.offsetHeight)obj.style.height=obj.scrollHeight+'px'; } 

Je présume que l'utilisateur tape dans la zone de texte

Hé, les 5 lignes de code suivantes ont fait le travail pour les zones de texte préchargées

 window.onload= function(){ var inputs, index; inputs = document.getElementsByTagName('textarea'); for (index = 0; index < inputs.length; ++index) { inputs[index].style.height=inputs[index].scrollHeight + 5 } } 

Le code accepté de François Wahl ne fonctionne pas lorsque vous supprimez des lignes dans la zone de texte – la hauteur reste la même. Assurez-vous de rendre la hauteur de texte automatique "automatique" avant de l'obtenir, faites-en scrollHeight:

 function resizeTextArea($element) { $element.height("auto"); $element.height($element[0].scrollHeight); } 

J'ai fait une solution OOP, j'utilise beaucoup, peut-être que cela peut aider les autres ici:

 $.fn.elasticHeight = function(){ $( this ).height( 'auto' ).height( $( this )[ 0 ].scrollHeight ); $( this ).on( "input", function(){ $( this ).height( 'auto' ).height( $( this )[ 0 ].scrollHeight ); } ); return this; }; 

Alors, il vous suffit d'ajouter le elasticHeight à votre zone de texte comme ça:

 $( "textarea" ).elasticHeight(); 

Le return this c'est pour le faire buller … alors vous pouvez le faire:

 $( "textarea" ).elasticHeight().val( "default value" ); 

Pas besoin de plugins de fantaisie de tiers …