如何在 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中文網其他相關文章！