如何使用 JavaScript 和 CSS 建立自動調整文字區域高度？

Textarea 自動高度

對於 Textarea 元素，管理其高度對於改善使用者體驗並保持美觀至關重要。網路應用程式。有時，您可能希望文字區域的高度根據其包含的文字量自動調整。

實現此目的的一個有效解決方案是透過 JavaScript 和 CSS。以下是實現它的逐步指南：

JavaScript:

1. 建立一個 JavaScript函數來計算和更新文字區域的height:

function auto_grow(element) {
  // Set the initial height to a small value (e.g., 5px)
  element.style.height = "5px";

  // Calculate the new height based on the scrollHeight property
  element.style.height = (element.scrollHeight) + "px";
}

CSS:

2. 設定文字區域的樣式以防止垂直捲動並設置最小高度Dimensions:

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

HTML:

3. 新增事件監聽器，當文字區域內容變更時呼叫auto_grow 函數：

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

透過實施此解決方案，文本區域的高度將自動調整為輸入或刪除文本，提供動態且便捷的使用者體驗。

以上是如何使用 JavaScript 和 CSS 建立自動調整文字區域高度？的詳細內容。更多資訊請關注PHP中文網其他相關文章！