Resize text area to fit all texts when loading jquery

Question

I understand that there have been many discussions on this issue, but I still have to find a solution to solve my problems. Basically, I need to auto-clear the text area not at input, but at boot. I extract the content from the database and, depending on user preferences, overlays over the text area, but the text areas do not scroll, so I need to authorize them to show all the text.

I tried scrollHeight, but this does not work fine, since there are several text fields on the screen.

thank

Answer 1

try it

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

Demo

---

UPDATE

As a hack, to make it work in old IE, just add a very short delay before executing it.

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

Demo

UPDATE FOR MULTIPLE TEXTS

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

Answer 2

It worked for me; it iterates over all the textarea elements on the Ready page and sets their height.

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

You can also combine it with an auto-expansion feature to make it fully dynamic when recording:

 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 this from the "keyup" event or through jQuery:

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

Notice how I add 10px to the scroll height: here you can adjust the amount of space in which you want the bottom of the text area to be displayed to the user.

Hope this helps someone. :)

Edit: Modified answer according to @Mariannes comment.

Answer 3

you can use this. This 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> 

Answer 4

You mentioned that there are several text fields. This code sets the height of each text field according to its own content.

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

Feed here

Answer 5

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

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

Answer 6

This is a 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(); }); 

Here you can see the demo http://jsfiddle.net/gZ2cC/