How to expand a textarea to its content and disable manual resizing using CSS and jQuery

Question

This question might be out of order for this site but I dont know where to look for something like this so I'm sorry if it is.

So I was on Google Forms making a dummy test form with a long answer question and I tried to figure out how the text area expand with its content but the resizing is disabled.

As I increased the amount of text so over 300 lorem ipsum caracters, a gap between the last line of text and the bottom of the textarea apeared, pasting the text a couple of times only increased the amount of space. My guess is that google calculate the aproximative height of the text using the average amount of caracters fitting on a line compared to the amount of characters written in the textarea box.

So I wondered if there was a way to detect more accurately the amount of lines in a textarea and adjust the height of it like on google forms (but maybe better?)

I was thinking:

Maybe having a precise mesure of every letters individual width and then calculate if the next letter will fit on the line.?
Maybe having a hidden from view div with the same width and same text styling and quickly copy the text to the div and then copy the div's offset height to the textarea?
Maybe I'm missing something you guys might know?

Let me know your toughts!

How about you count number of lines in textarea for height [this](http://stackoverflow.com/questions/2035910/how-to-get-the-number-of-lines-in-a-textarea) might help, and as for disabling resize take a look into [this](http://stackoverflow.com/questions/5235142/how-to-disable-resizable-property-of-textarea) — mbeso, Mar 02 '17 at 20:38
My `textarea` has a fixed `width` and `height` and is `resize:none;` so I can't use something like height. I'm planning on updating height using this information. The String.prototype.lineCount() that's used in the refered post only returns 1. I want the line count including the lines created by wrapping the text. Just like my example on Google forms — Samuel Charpentier, Mar 02 '17 at 21:37
This JSfiddle might be a good solution! http://jsfiddle.net/Mottie/PfD7L/100/ — Samuel Charpentier, Mar 02 '17 at 21:51
Take a look into [this](https://jsfiddle.net/gb2vr2t7/) one. It might get you on the road. Paste some Lorem ipsum text... — mbeso, Mar 02 '17 at 22:08
[This](https://jsfiddle.net/scharpentier0/o2o369y4/4/) works far better. I'll take a look and disect it because it seems quite complex. but there's no failiure as of what I've tested exepted that on the first letter of the new line it adds 2 lines. — Samuel Charpentier, Mar 02 '17 at 22:24

score 0 · Accepted Answer · answered Mar 04 '17 at 00:33

This did the trick using jQuery, if anyone is looking for a reliable solution that can stand over a milion characters and process the height in less than 5 seconds!

$('textarea').on('input propertychange paste', function() {
  adjustTextareaHeight(this);
 });
function adjustTextareaHeight( ta ) {
  //Get the height of any padding and border that's computed by jQuery in .height
  var  padAndBordHeight = $(ta).outerHeight()-$(ta).height();

  // because the scrollbar can cause calculation problems
  $(ta).css( "overflow", "hidden" );

  //Make the height of the <textarea> 0 to be able to get an "adjusted to content" read of the .scrollHeight
  $(ta).height(0);
  //Make the height of the <textarea> as tall as the .scrollHeight as it has wrapped the content of the text area
  $(ta).height(ta.scrollHeight-(padAndBordHeight));
  $(ta).parent().find("strong").toggleClass("visible",ta.scrollHeight>ta.offsetHeight);
  //log the amount of lines in the console /!\ 20 is my line height /!\
  /*console.log("There are "+Math.ceil($(ta).height()/20)+" lines in the current textarea");*//*my line heigh is 34*/
 }
function textareaBlur(ta){
 $(ta).height(20);
 $(ta).parent().find("strong").toggleClass("visible",ta.scrollHeight>ta.offsetHeight);
}
$('textarea').each(function() {
adjustTextareaHeight(this);
})

/* textarea needs a line-height for the javascript to work */
#ta, #foo {
  display:block;
    width: 300px;
    line-height: 20px;
    height:20px;
    resize:none;
    overflow:hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="lines">...</div>

<textarea id="ta" rows="1" onfocus="adjustTextareaHeight(this);" onblur="textareaBlur(this)"></textarea>
<textarea id="foo" rows="1" onfocus="adjustTextareaHeight(this);" onblur="textareaBlur(this)"></textarea>

How to expand a textarea to its content and disable manual resizing using CSS and jQuery

1 Answers1