如何创建一个在内容删除时缩小的自动调整大小的文本区域？

创建一个自动调整大小并缩小的文本区域

挑战：之前尝试使用自动调整大小创建一个文本区域调整大小无法根据内容缩小文本区域

解决方案：

原始线程提供的代码根据其内容调整文本区域的高度。但是，它没有考虑内容删除，从而导致 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中文网其他相关文章！