如何在 JavaScript 中创建自调整文本区域？-css教程-PHP中文网

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

Patricia Arquette

发布： 2024-12-15 06:30:11

原创

418 人浏览过

How Can I Create Self-Adjusting Textareas in 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中文网其他相关文章！