textarea устанавливает высоту на основе содержимого js или jquery

Это может помочь. Это оба плагина jQuery.

• jQuery Elastic
• Гибкая область
• Autogrow

редактировать

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

Этот ответ был предоставлен Франсуа Уалем ниже.

Удалите высоту жесткого кодирования и дайте вашему textarea id:

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

Используя jQuery, вы можете использовать следующее для автоматического изменения размера при загрузке страницы, а затем в случае события keuUp как ранее упоминалось.

 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); }​ 

См. DEMO

В качестве альтернативы, если все, о чем вы заботитесь, отображает его и удаляет заполнение строки по умолчанию, используйте это:

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

См. DEMO

Чтобы все ваши текстовые поля не отставали от их содержимого, увеличивая или уменьшая высоту по мере ввода, используйте следующее:

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

на самом деле было бы полезно установить эту строку кода на самой SO 🙂

Поддержка нескольких текстовых областей. На основании @ Франсуа ответ. Демо-скрипт

 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'; } 

Я предполагаю, что пользователь печатает в текстовом поле

Эй, только следующие 5 строк кода выполнили задание для предварительно загруженных текстовых полей

 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 } } 

Принятый код François Wahl не работает, когда вы удаляете строки в textarea – высота остается неизменной. Удостоверьтесь, что вы создаете высоту textarea «auto», прежде чем получить ее scrollHeight:

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

Я сделал решение ООП, которое я использую много, возможно, он может помочь другим:

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

то вы просто добавляете эластичный вес в свою текстовую область:

 $( "textarea" ).elasticHeight(); 

return this должно сделать его пузырь … так что вы можете это сделать:

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

Нет необходимости в причудливых плагинах сторонних разработчиков …