如何实现Textarea字段的自动高度调整？

Textarea 自动高度

本题探讨如何自动调整文本区域的高度以匹配其内容的长度，有效消除需要垂直滚动条。

问题源于这样一个事实：默认情况下，文本区域具有固定的高度，无论它们包含的文本量如何。如果文本超过预定义的高度，它将变得无法访问并需要滚动。

这里提供的解决方案使用纯 JavaScript 根据实际内容调整文本区域的高度。定义了一个名为“auto_grow”的函数，该函数最初将文本区域的高度设置为“5px”。这确保了它具有最小高度。随后，它读取文本区域的“scrollHeight”属性，该属性表示其内容的高度。然后调整高度以匹配该值，有效地使文本区域的高度动态化。

要集成此功能，建议使用以下 CSS：

<code class="css">textarea {
  resize: none;
  overflow: hidden;
  min-height: 50px;
  max-height: 100px;
}</code>

此 CSS 删除了内置调整手柄大小，防止可见溢出，并设置最小和最大高度限制。

最后，为了利用自动调整大小，使用以下 HTML：

<code class="html"><textarea oninput="auto_grow(this)"></textarea></code>

这附加了“oninput” ” 事件到文本区域，每当用户输入文本时就会触发“auto_grow”函数。因此，文本区域的高度会根据其内容的长度动态调整，从而提供无缝的用户体验。

以上是如何实现Textarea字段的自动高度调整？的详细内容。更多信息请关注PHP中文网其他相关文章！