只用 CSS 就能動態調整 Textarea 高度嗎？

使用CSS 動態文字區域高度

建立用於使用者輸入的文字區域時，通常需要擴充或縮小它以適應文字量的內容。雖然有涉及 JavaScript 或 PHP 的解決方案，但有沒有純粹基於 CSS 的方法？

解決方案：

是的，可以使用 CSS 來實現動態文字區域高度。操作方法如下：

1. 將初始高度設定為自動：要允許文字區域根據需要增大或縮小，請將其初始高度設定為「自動」：

textarea {
  height: auto;
}

2. 使用'oninput' 事件： 要動態調整文字區域的高度，請為其附加'oninput' 事件處理程序：

<textarea oninput='this.style.height = "";this.style.height = this.scrollHeight + "px"'></textarea>

3. 先重置高度：在根據內容設定高度之前，先將其重設為空字串。這確保了文字區域可以縮小和擴展。
4. 計算真實高度：根據滾動內容確定文字區域的真實高度，並將其作為像素添加到「高度」屬性.

透過實作這些步驟，您可以建立一個文字區域，該區域將自動調整其高度以適應其內容，而無需求助於JavaScript 或PHP。

以上是只用 CSS 就能動態調整 Textarea 高度嗎？的詳細內容。更多資訊請關注PHP中文網其他相關文章！