Auto height textarea

JavaScript
1

[code]

noHeight line1 line2 line3 line4 [/code]` The page "noHeight" at http://dot.kr/x-test/height/noHeight.php has the code above. formValue of the textArea has 4 lines. 1st line and 2nd line are shown when it is loading But the last line and 3rd line are hidden when it is loading because the textArea has no height.

The page “fixHeight” at http://dot.kr/x-test/height/fixHeight.php
has the style code “height:60px”.
So all 4 lines are shown when it is loading.
So far so good.

Since “formValue” is dynamic, the number of lines can also be 5 lines,
6 lines or 100 lines.
So I don’t know the height exactly.
That’s why I made auto.php at http://dot.kr/x-test/height/auto.php
with the code below.

[code]

auto textArea value line1 textArea value line2 textArea value line3 textArea value line4 [/code] The page "auto" above can prolong the height of the textArea by the number of lines. As you enter something into the textArea box, it prolong the height of the textArea. But it has a problem, i.e, the last line and the 3rd line are hidden when it is loading.

I like to make it that all the dynamic lines are shown when it is loading from the first.

As you enter something into the textArea box, the page “div” at http://dot.kr/x-test/height/div.php can show the all dynamic lines when it is loading from the first.
and it can prolong the height of the textArea box.

However, the page “div” has another problem.
I cannot get the formValue of the box at the next page “action.php” because it is using “div” instead of “textArea”.

How can I make it autoHeight by using textArea?

2

You just need to run your MaxMe() function automatically when page is loaded.
Add id to your textarea:

<textarea id="myTextArea" ... >

then add onload attribute to <body> tag:

<body onload="MaxMe(getElementById("myTextArea"))">
3

Thank you, megazoid.

The code at http://dot.kr/x-test/height/auto1.php has megazoid’s code.
I am afraid it doesn’t show yet the last line and the 3rd line when it’s loading.

4

My bad, there should be other type of quotes inside onload. Fixed version:

<body onload="MaxMe(getElementById('myTextArea'))">
5

I fix it as you said at http://dot.kr/x-test/height/auto2.php
But it seems not to work yet.

6

Ok, let’s continue :smile: now i forgot to add document before getElementById:

 <body onload="MaxMe(document.getElementById('myTextArea'))">
7

Put that Javascript before the closing </body> tag like megazoid had previously.

8

The page at http://dot.kr/x-test/height/auto3.php
seems not to work yet.

9

Finally, i did it. Here is working code:

<!DOCTYPE html>
<html>
<title>auto3</title>
<body onload="resize(document.getElementById('myTextArea'))">
<form action="action.php" method="post">
 <textarea onkeyup="MaxMe(this)" style="overflow:hidden" name="formValue" id="myTextArea">line1
line2
line3
line4 </textarea>
<input type="submit" value="submit"></form>
<script type="text/javascript">
	var oldScrollHeight = document.getElementById('myTextArea').scrollHeight;
	function MaxMe(o) {     	
		if (o.scrollHeight - oldScrollHeight > 4){	        
			resize(o);
			oldScrollHeight = o.scrollHeight;
		}
	}
	function resize(o){
		o.style.height = o.scrollTop + o.scrollHeight + "px";
	}	
  </script>
</body>
</html>

I had to make a trick with oldScrollHeight because there is a bug with scrollHeight in Chrome

1 Like
10

Thank you megazoid, The perfect answer solved the problem

11

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.