如何实现无滚动条动态Textarea高度调整？

重访Textarea自动高度

问题：

很多开发者都遇到过需要调整的情况动态调整文本区域的高度以适应其中的内容。这不仅增强了用户体验，还消除了不必要的滚动条。

解决方案：

实现此目的的一种方法是使用纯 JavaScript。下面是一个有效调整文本区域高度的代码片段：

<code class="javascript">function auto_grow(element) {
  element.style.height = "5px";
  element.style.height = (element.scrollHeight) + "px";
}</code>

在此代码中：

• 元素是要调整的文本区域。
• 初始高度设置为一个较小的值（5px）以允许精确计算。
• scrollHeight 属性返回文本区域内容的高度，包括隐藏的溢出。
• 将高度设置为滚动高度动态调整以适应内容。

要在 CSS 和 HTML 中实现此功能：

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

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

• resize: none;防止用户调整文本区域的大小。
• 溢出：隐藏；隐藏超出设定高度的任何多余内容。
• min-height 和 max-height 定义最小和最大高度限制。
• 每当文本区域中的输入发生变化时，oninput 事件就会触发 auto_grow 函数.

此解决方案可确保文本区域的高度与其包含的内容相匹配，从而在没有滚动条的情况下提供改进的用户体验。

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