Marielle Lapidario Marielle Lapidario - 19 days ago 11
CSS Question

Textarea does not auto resize with pre-filled value

I have a textarea that resizes based on what I type. I used this solution by

KyleMit
to do it.

HTML:

<textarea onkeyup="textAreaAdjust(this)" style="overflow:hidden"></textarea>


JS:

function textAreaAdjust(o) {
o.style.height = "1px";
o.style.height = (25+o.scrollHeight)+"px";
}


This works fine when the user has to type on the textarea but the textarea has a pre-filled value in it. The resizing does not work with the pre-filled value. It only resizes when the user starts typing on the textarea.

example of pre-filled textarea

<textarea onkeyup="textAreaAdjust(this)" style="overflow:hidden">Identify, formulate, research literature, and analyze user needs and taking them into account to solve complex information technology problems, reaching substantiated conclusions using fundamental principles of mathematics, computing fundamentals, technical concepts and practices in the core information technologies, and relevant domain disciplines.</textarea>


Is there a way I can solve this problem through CSS or JS?

Answer

You would have to use these two lines of code out of the function as well,so that it is used at the time of page load as well,

You could give an id to the text area and then you could call the code in this manner,and then call it on page load,it will definitely work as shown below

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
</head>
<body onload="callOnPageLoad()">
<script>
function callOnPageLoad(){
	document.getElementById("textareaEx").style.height="1px";
	document.getElementById("textareaEx").style.height=(25+document.getElementById("textareaEx").scrollHeight)+"px";
	}
</script>
<textarea onkeyup="callOnPageLoad()" id="textareaEx" style="overflow:hidden">Identify, formulate, research literature, and analyze user needs and taking them into account to solve complex information technology problems, reaching substantiated conclusions using fundamental principles of mathematics, computing fundamentals, technical concepts and practices in the core information technologies, and relevant domain disciplines.</textarea>
</body>
</html>

Comments