Изменение размера текстовой области для соответствия всем текстам при загрузке jquery

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

Я пробовал scrollHeight, но это не работает отлично, поскольку на экране есть несколько текстовых полей.

Спасибо

Ответ 1

Попробуйте это

$("textarea").height( $("textarea")[0].scrollHeight );

DEMO

UPDATE

В качестве взлома, чтобы заставить его работать в старых IE, просто добавьте очень короткую задержку перед его выполнением.

window.setTimeout( function() {
    $("textarea").height( $("textarea")[0].scrollHeight );
}, 1);

DEMO

ОБНОВЛЕНИЕ ДЛЯ МНОЖЕСТВЕННЫХ ТЕКСТАРЕЙ

$("textarea").each(function(textarea) {
    $this.height( $this[0].scrollHeight );
});

Ответ 2

Это сработало для меня; он перебирает все элементы "textarea" на странице "Готов" и устанавливает их высоту.

$(function () {
    $("textarea").each(function () {
        this.style.height = (this.scrollHeight+10)+'px';
    });
});

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

function autoresize(textarea) {
    textarea.style.height = '0px';     //Reset height, so that it not only grows but also shrinks
    textarea.style.height = (textarea.scrollHeight+10) + 'px';    //Set new height
}

и вызовите это из события "keyup" или через jQuery:

$('.autosize').keyup(function () {
    autoresize(this);
});

Обратите внимание, как я добавляю 10px к высоте прокрутки: здесь вы можете отрегулировать объем пространства, в котором вы хотите, чтобы нижняя часть области текста выдавала пользователю.

Надеюсь, что это поможет кому-то.:)

Изменить: Изменен ответ в соответствии с комментарием @Mariannes.

Ответ 3

вы можете использовать это. Это работает для меня.

$('#content').on('change keyup keydown paste cut', 'textarea', function () {
        $(this).height(0).height(this.scrollHeight);
    }).find('textarea').change();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="content">
  <textarea>How about it</textarea><br />
  <textarea>111111
222222
333333
444444
555555
666666</textarea>
</div>

Ответ 4

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

$(document).ready( function( ) {

    $("textarea").each( function( i, el ) {
        $(el).height( el.scrollHeight );
    });

});

Fiddle здесь

Ответ 5

В качестве альтернативы вы можете использовать редактируемый div в HTML 5.

Ссылка: http://www.w3.org/TR/2011/WD-html5-20110525/editing.html#contenteditable

Ответ 6

Это обходное решение.. и, возможно, альтернативное решение:

 $('textarea').each(function(){
    var height = $('<div style="display:none; white-space:pre" id="my-hidden-div"></div>')
                 .html($(this).val())
                 .appendTo('body')
                 .height();     
   $(this).css('height',height + 'px');
   $('#my-hidden-div').remove();

});

Здесь вы можете увидеть демо http://jsfiddle.net/gZ2cC/