Resize text area to fit all text on load jquery

Question

I understand there has been a lot of discussion on this but I have yet to find a solution to fix my needs. Basically I need to autogrow a text area not when you type but on

Answer 1

This worked for me; it loops through all "textarea" elements on page Ready, and set their height.

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

You can also combine it with an auto-expand function, to make it fully dynamic while writing as well:

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
}

and call that from an "keyup" event or through jQuery:

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

Note how I am adding 10px to the scroll height: here you can adjust the amount of space you would like the bottom of the text area to give the user.

Hope that helps someone. :)

Edit: Changed answer according to @Mariannes comment.

Answer 2

Alternatively, you could use an editable div in HTML 5.

Reference : http://www.w3.org/TR/2011/WD-html5-20110525/editing.html#contenteditable

Answer 3

You mentioned there are multiple textboxes. This code will set the height of each textarea according to its own contents.

$(document).ready( function( ) {

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

});

Fiddle here

Answer 4

Try this

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

DEMO

---

UPDATE

As a hack to make it work in older IE-s just add a really short delay before executing it

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

DEMO

UPDATE FOR MULTIPLE TEXTAREAS

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

Answer 5

This is an workaround.. and maybe an alternative solution:

 $('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();

});

You can see a demo here http://jsfiddle.net/gZ2cC/

Answer 6

you can use this. It works for me.

$('#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>