How to automatically expand textarea

[ifedi]

I need to make a textarea grow automatically (in height) as the user entry flows over to a new line...
Actually I got this working well, only when ENTER is hit (I made use of the total number of \r\n in the textarea content, and setting the textarea ROWS attribute to this), but am at a loss implementing this for the situation when the text WRAPS by itself (ie with long text lines). The problem is that a long phrase may actually occupy 3 lines visually, but is counted as only one \r\n, leading to partially hidden text and overflow scroll situation.
Any help is highly welcome

[improvcornartist]

You could get the textarea value length and cols value to determine how many rows you want and apply it on key up/down or however fits best.

textarea.rows = Math.ceil(textarea.value.length / textarea.cols);

[ifedi]

@improvcornartist
Thanks improvcornartist for your kind reply.
However, I have like 2 issues with this solution:

textarea.rows = Math.ceil(textarea.value.length / textarea.cols); 
 

1. It seems I would therefore need to supply the COLS attribute for any textarea needing this functionality. Problem is I've mostly used the STYLE.WIDTH instead, to determine the textarea widths.
2. Even given the COLS attribute, the code rather fails when the textarea contains CRLF on lines that do not contain the COLS number of characters, like so:

Lorem ipsum dolor sit amet consectetuer Lorem pretium molestie congue Curabitur. Et at augue at morbi at adipiscing condimentum wisi lorem In.
1.Lorem
2.ipsum
3.dolor
4.sit
5.condimentum

With this example, the the textarea does not expand as frequently as expected, because each of the shorter lines does not meet the COLS attribute, to cause a lengthening!
I remain grateful for your further attention to this.
Regards, Ifedi.

[improvcornartist]

You are right, that is a very generic approach. You will probably need to try a combination of things, such as considering the text length as well as the number of newlines. You may be able to use something like textarea.scrollHeight.

[ifedi]

@improvcornartist
Yes!!
As a matter of fact, it was not "a combination of newlines and text length" that did it; it was textarea.scrollHeight.
Bravo brother, I appreciate your insight.
Ifedi.