JQuery TextArea AutoGrow Plugin

Question

I'm trying to find the best textarea autogrow plugin. I need one which resizes the textarea even when I paste into it. Any idea?

score 7 · Answer 1 · answered Aug 23 '11 at 13:49

7

Elastic is a very good one, and it handles CTRL + V cases too.

You can visit the website and try out a demo.

answered Aug 23 '11 at 13:49

labilbe

3,501
2
29
34

+1 because Elastic rocks and is just what I needed! :) Thanks for sharing it. – Nathan Sep 04 '11 at 05:54
1

Elastic is bad for 2 reasons: (1) its slow and really laggy, even in Google Chrome and (2) if minify the script in your deploy, it will break the JS. – Brad Gessler Feb 23 '12 at 11:12
Okay and what plugin is better in your opinion? – labilbe Mar 04 '12 at 05:08

score 4 · Answer 2 · answered Aug 09 '13 at 14:10

4

This is the one I ended up using. Working great so far!

http://www.jacklmoore.com/autosize/

The JQuery Elastic plugin is slow and didn't work for me in IE8.

answered Aug 09 '13 at 14:10

Pete Montgomery

4,060
3
30
40

score 4 · Accepted Answer · edited Oct 03 '15 at 23:20

4

Why not use it?? http://plugins.jquery.com/project/autogrowtextarea

Or another updated version of this plugin here: https://github.com/ro31337/jquery.ns-autogrow

edited Oct 03 '15 at 23:20

Roman Pushkin

5,639
3
40
58

answered Feb 19 '11 at 12:38

Manish Trivedi

3,481
5
23
29

doesn't autoresize on paste... :( – Hirvesh Feb 19 '11 at 12:45
I had issues with the jquery.ns-autogrow cause of certain styling choices. I used the autosize.js and it worked out of box and with one line of code to set the auto size. – Rob Mar 11 '16 at 16:07

score 2 · Answer 4 · edited Jan 16 '14 at 13:00

2

I used the following method, in jQuery.

setInterval(function(){
      $(name_textarea).css('height', $(name_textarea)[0].scrollHeight+2+'px')
},100);

Try it, you could possibly change the scrollHeight to obtain the best results.

edited Jan 16 '14 at 13:00

Lokesh A. R.

2,326
1
24
28

answered Jan 16 '14 at 12:41

Gaucho_9

265
1
3
11

I ended up using $(name_textarea).prop("scrollHeight") in order to get scroll height. – DeadlyChambers Nov 13 '14 at 16:28

score 1 · Answer 5 · answered Jan 15 '12 at 15:49

1

You can try Advanced Textarea. Download from http://www.jscripts.info

Auto-Height Textarea
Returns Plain Text and HTML Content
Automatic URL and Email recognition
HTML Tags Filter

answered Jan 15 '12 at 15:49

john

11
1

score 0 · Answer 6 · answered Jun 14 '13 at 23:12

0

i made another one plugin to do this, check it here: https://github.com/AndrewDryga/jQuery.Textarea.Autoresize

answered Jun 14 '13 at 23:12

Andrew Dryga

692
2
7
21

score 0 · Answer 7 · edited May 23 '17 at 11:44

0

"I need one which resizes the textarea even when I paste into it"

this method also listen for copy/paste events: https://stackoverflow.com/a/5346855/4481831

I think on modern browsers those events can be replaced with "input" event, but on older browser this method will not work.

edited May 23 '17 at 11:44

Community

1
1

answered Jul 17 '16 at 08:34

crisc2000

1,082
13
19

score 0 · Answer 8 · answered Feb 04 '20 at 10:05

Auto-expand of text area can be accomplished without plugin. For example:

 var change_textarea = function() {
   jQuery('#your_textarea').on( 'change keyup keydown paste cut', 'textarea', 
   function(){
     jQuery(this).height(0).height(this.scrollHeight);
   }).find( 'textarea' ).change();  
 }

And do not forget to call the function on document ready:

  jQuery(document).ready(function() {
     change_textarea();
  )};

score -1 · Answer 9 · answered Dec 11 '12 at 01:38

Here is another plug, that also support horizontal growing of text areas:

https://github.com/dgbeck/jquery.autogrow-textarea

It is also based on the "mirror" approach but falls back to simple math in IE 8 and lower, since the mirror approach leads to textareas that grow too quickly in IE <= 8.

JQuery TextArea AutoGrow Plugin

9 Answers9