Textarea 不会使用预填充值自动调整大小

Question

我有一个文本区域，它会根据我输入的内容调整大小。我使用了 KyleMit 的解决方案。

HTML:

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

JS:

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

当用户必须在 textarea 上键入但 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>

有没有办法通过CSS或者JS解决这个问题？

Answer 1

你也必须在函数外使用这两行代码，以便在页面加载时也使用它，

你可以给文本区一个id，然后你可以这样调用代码，然后在页面加载时调用它，它肯定会如下所示

<!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>

Textarea 不会使用预填充值自动调整大小

Textarea does not auto resize with pre-filled value

javascript

css

textarea