如何實現Textarea欄位的自動高度調整？

Textarea 自動高度

本題探討如何自動調整文字區域的高度以符合其內容的長度，有效消除需要垂直捲。

問題源自於這樣一個事實：預設情況下，文字區域具有固定的高度，無論它們包含的文字量如何。如果文字超過預先定義的高度，它將變得無法存取並需要滾動。

這裡提供的解決方案使用純 JavaScript 根據實際內容調整文字區域的高度。定義了一個名為「auto_grow」的函數，該函數最初將文字區域的高度設定為「5px」。這確保了它具有最小高度。隨後，它會讀取文字區域的「scrollHeight」屬性，該屬性表示其內容的高度。然後調整高度以匹配該值，有效地使文字區域的高度動態化。

要整合此功能，建議使用以下 CSS：

<code class="css">textarea {
  resize: none;
  overflow: hidden;
  min-height: 50px;
  max-height: 100px;
}</code>

此 CSS 刪除了內建調整手把大小，防止可見溢出，並設定最小和最大高度限制。

最後，為了利用自動調整大小，使用以下HTML：

<code class="html"><textarea oninput="auto_grow(this)"></textarea></code>

這附加了「oninput」 」 事件到文字區域，每當使用者輸入文字時就會觸發「auto_grow ”函數。因此，文字區域的高度會根據其內容的長度動態調整，從而提供無縫的用戶體驗。

以上是如何實現Textarea欄位的自動高度調整？的詳細內容。更多資訊請關注PHP中文網其他相關文章！