Textarea 仅调整 1 个区域的大小答案

【问题标题】：Textarea only resizes 1 areaTextarea 仅调整 1 个区域的大小
【发布时间】：2023-04-09 01:14:01
【问题描述】：

我的文本区域有问题。问题是我想要多个文本区域需要在页面加载时调整大小。这适用于一个 textarea，但是当我插入 2 个 textarea（或更多）时，只有第一个可以工作。所以第一个文本区域之后的所有文本区域不会调整到它们的高度。

我的代码

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

希望有人可以帮助我。

【问题讨论】：

但是当我插入2个textarea的...发布代码
您可能对两个 textarea 使用相同的 id，这将导致问题。
@Diljohn5741 你对我能做什么有什么建议吗？
尝试通过标签名称获取元素，然后循环进入每个元素，然后调整大小
@Quentin 下面发布了一个答案。就够了。

标签： javascript html css textarea

【解决方案1】：

id 必须在页面上是唯一的。

如果页面上有多个元素，则getElementById 将返回第一个元素，错误恢复将忽略其他元素。

如果要识别一组元素，则可以使用class 而不是id。

您可以通过getElementsByClassName 或querySelectorAll 获取属于某个类的元素。这些将返回一个节点列表，您可以像数组一样循环访问该节点列表以依次访问每个元素。

【讨论】：

【解决方案2】：

就像@Quentin 所说的“一个 id 在页面上必须是唯一的。

如果页面上有多个元素，则 getElementById 将返回第一个元素，错误恢复将忽略其他元素。"

这是一个 sn-p 使用 document.getElementsByClassName 来迭代/访问所有 textArea 元素

<html>

<head>
  <meta charset="ISO-8859-1">
  <title>Insert title here</title>
</head>

<body onload="callOnPageLoad()">
  <script>
    function callOnPageLoad() {
      var ta = document.getElementsByClassName("ta");

      for (i = 0; i < ta.length; i++) {

        ta[i].style.height = "1px";
        ta[i].style.height = (25 + ta[i].scrollHeight) + "px";
      }
      // 	document.getElementById("textareaEx").style.height="1px";
      // 	document.getElementById("textareaEx").style.height=(25+document.getElementById("textareaEx").scrollHeight)+"px";

    }
  </script>
  <textarea class="ta" 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>

  <textarea class="ta" onkeyup="callOnPageLoad()" id="textareaEx1" 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>

【讨论】：