如何創建一個真正自動調整大小的文字區域，隨內容縮小和成長？-js教程-PHP中文網

如何創建一個真正自動調整大小的文字區域，隨內容縮小和成長？

Mary-Kate Olsen

發布： 2024-12-15 08:05:14

原創

581 人瀏覽過

How Can I Create a Truly Auto-Resizing Textarea That Shrinks and Grows with Content?

建立自動調整大小的文字區域

在先前的討論中，介紹了一種建立自動調整大小的文字區域的方法。然而，仍然存在一個限制：文字區域在內容刪除時無法縮小。關鍵問題在於取得文字區域內容的正確高度。

完整解決方案

以下程式碼提供了一個全面的解決方案，解決了上一個方法遇到的限制：

$("textarea").each(function () {
  this.style.height = this.scrollHeight + "px";
  this.style.overflowY = "hidden";
}).on("input", function () {
  this.style.height = "auto";
  this.style.height = this.scrollHeight + "px";
});

登入後複製

優點：

適用於按鍵輸入
支援貼上文字（右鍵點擊和ctrl v）
處理剪貼文字（右鍵點擊和ctrl v）
處理剪貼切文字（右鍵單擊和ctrl x）
容納預先載入文字
適用於所有文字區域（多行文字方塊）全站
相容於Firefox、Chrome、IE、Edge、iOS Safari 和Android 瀏覽器

嚴格JavaScript 模式相容

實作：

在主腳本中包含 jQuery 函式庫檔案。
將 JavaScript 程式碼片段複製到主腳本檔案中。

自我調整文字區域現在可以在您的網站上使用。

有了這個增強的程式碼，文字區域現在可以輕鬆地自動調整大小，從而在各種平台和瀏覽器上提供用戶友好且一致的體驗。

以上是如何創建一個真正自動調整大小的文字區域，隨內容縮小和成長？的詳細內容。更多資訊請關注PHP中文網其他相關文章！