如何建立一個在內容刪除時縮小的自動調整大小的文字區域？

建立一個自動調整大小並縮小的文字區域

挑戰：之前嘗試使用自動調整大小來建立一個文字區域調整大小無法根據內容縮小文字區域

解決方案：

原始執行緒提供的程式碼根據其內容調整文字區域的高度。但是，它沒有考慮內容刪除，從而導致 clientHeight 值不正確。

要克服此限制，需要更全面的解決方案：

function FitToContentWithShrink(id, maxHeight) {
  var text = id && id.style ? id : document.getElementById(id);
  if (!text) return;

  var newHeight = text.scrollHeight;
  var currentHeight = text.clientHeight;

  // Check if the content has changed
  if (newHeight !== currentHeight) {
    if (newHeight > currentHeight) {
      // If the new height is greater than the current height, expand
      text.style.height = newHeight + "px";
    } else if (newHeight < currentHeight) {
      // If the new height is less than the current height, shrink
      text.style.height = newHeight + "px";
    }
  }
}

好處：

• 縮小內容： 此解決方案正確根據內容變更（包括刪除）計算新高度。
• 跨瀏覽器可靠：支援 Firefox、Chrome、IE、Edge、IOS Safari 和 Android 瀏覽器。
• 使用預先載入的文字：處理預先填入的文字文字區域。
• 多功能： 可應用於網站上的所有文字區域。

用法：

window.onload = function () {
  document.getElementById("ta").onkeyup = function () {
    FitToContentWithShrink(this, 500);
  };
};

額外注意：

在嚴格模式下應用JavaScript 不會影響此解決方案的功能。

以上是如何建立一個在內容刪除時縮小的自動調整大小的文字區域？的詳細內容。更多資訊請關注PHP中文網其他相關文章！