如何實現無滾動條動態Textarea高度調整？

重訪Textarea自動高度

問題：

很多開發者都遇過需要調整的情況動態調整文字區域的高度以適應其中的內容。這不僅增強了用戶體驗，還消除了不必要的滾動條。

解決方案：

實現此目的的一種方法是使用純 JavaScript。以下是一個有效調整文字區域高度的程式碼片段：

<code class="javascript">function auto_grow(element) {
  element.style.height = "5px";
  element.style.height = (element.scrollHeight) + "px";
}</code>

在此程式碼中：

• 元素是要調整的文字區域。
• 初始高度設定為一個較小的值（5px）以允許精確計算。
• scrollHeight 屬性傳回文字區域內容的高度，包括隱藏的溢位。
• 將高度設定為滾動高度動態調整以適應內容。

要在 CSS 和 HTML 中實現此功能：

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

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

• resize: none;防止使用者調整文字區域的大小。
• 溢位：隱藏；隱藏超出設定高度的任何多餘內容。
• min-height 和 max-height 定義最小和最大高度限制。
• 每當文字區域中的輸入發生變化時，oninput 事件就會觸發auto_grow 函數.

此解決方案可確保文字區域的高度與其包含的內容相匹配，從而在沒有滾動條的情況下提供改進的用戶體驗。

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