如何在 JavaScript 中创建自调整文本区域？

自动高度文本区域

使用文本区域时的一个常见挑战是确保它们调整其高度以适应用户的输入，而不需要一个滚动条。在文本区域的内容长度经常变化的情况下会出现这种问题。以下是使用纯 JavaScript 实现此目的的方法：

提供的代码片段利用名为 auto_grow 的 JavaScript 函数，该函数根据文本区域的内容动态调整文本区域的高度：

function auto_grow(element) {
  element.style.height = "5px";
  element.style.height = (element.scrollHeight) + "px";
}

在 CSS 中，您可以定义以下样式来删除滚动条并设置最小和最大高度：

textarea {
  resize: none;
  overflow: hidden;
  min-height: 50px;
  max-height: 100px;
}

实现此功能，只需将 oninput 属性添加到您的 中即可。元素，当用户键入时调用 auto_grow 函数：

<textarea oninput="auto_grow(this)"></textarea>

通过此实现，您的文本区域将自动调整其高度以匹配其内容的长度，无需滚动条即可提供无缝的用户体验.

以上是如何在 JavaScript 中创建自调整文本区域？的详细内容。更多信息请关注PHP中文网其他相关文章！