Resize text area to fit all text on load jquery
Try this
$("textarea").height( $("textarea")[0].scrollHeight );
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);
UPDATE FOR MULTIPLE TEXTAREAS
$("textarea").each(function(textarea) { $(this).height( $(this)[0].scrollHeight );});
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.
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>111111222222333333444444555555666666</textarea></div>