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

文字區域自動高度：綜合指南

使用文字區域時，通常需要根據文字內容自動調整其高度刪除過多的滾動或空白區域。以下是使用CSS 和JavaScript 來實現此效果的詳細解決方案：

CSS 樣式：

textarea {
  resize: none;
  overflow: hidden;
  line-height: 1.5;
  padding: 15px 15px 30px;
  max-width: 100%;
}

此CSS 確保文字區域不可調整大小，隱藏任何文字區域溢出，並設定適當的行高和填充。

JavaScript邏輯：

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

此 JavaScript 函數用於根據文字區域的內容動態調整文字區域的高度。它設定初始高度為 5px，然後將其大小調整為scrollHeight 屬性，該屬性表示文字內容的實際高度。

HTML 整合：

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

將 oninput 事件監聽器附加到 textarea，每當使用者輸入時就會觸發 auto_grow()函數

實作：

結合CSS 樣式、JavaScript 函數和HTML 整合來建立一個文字區域，該文字區域會在您鍵入時自動調整其高度，從而提供更多使用者體驗-友善且美觀的體驗。

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