如何自動調整文字區域高度以適應內容？

文字區域的高度調整

許多開發人員遇到了讓文字區域元素自動調整其高度以適應其包含的內容的挑戰。這透過刪除不必要的滾動條來增強用戶體驗。

為了滿足這個需求，可以使用基於JavaScript 的解決方案：

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

除了此JavaScript 程式碼之外，還可以實現CSS 樣式處理文字區域的美觀性：

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

HTML 實現利用oninput 事件來觸發高度調整：

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

透過這種方法，文字區域將根據高度自動擴展或收縮根據輸入的文字量，消除對捲軸的需要並確保無縫的使用者體驗。

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