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

文字區域可以自動調整其高度以容納內容嗎？

擴展這個問題，通常需要讓文字區域自動調整其高度以適應他們的動態內容。傳統的 div 溢出方法，例如“overflow:show”，在這種情況下不適用。

基於 CSS 的解決方案：動態高度調整

幸運的是，有一個簡單而優雅的 CSS 解決方案可以解決這個問題。透過使用以下程式碼，可以將文字區域配置為拉伸以無縫地適應其內容：

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

在此腳本中，「oninput」事件偵聽器會偵測文字區域內容的變更。然後，它動態設定文字區域的高度以符合「scrollHeight」屬性，該屬性表示內容所需的實際高度。附加行“this.style.height =”“;”允許文字區域收縮和拉伸。

實現和好處

該解決方案提供了一種輕量級且高效的方法來確保文本區域自動調整其高度，從而提供更多為最終用戶提供用戶友好且響應迅速的體驗。它消除了對複雜 PHP 或 JavaScript 腳本的需求，即使是新手開發人員也能輕鬆適應。

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