javascript - 创建具有自动调整大小的文本区域

Question

有another thread about this ，我已经尝试过。但有一个问题:如果删除内容，textarea 不会缩小。我找不到任何方法将其缩小到正确的大小 - clientHeight 值返回为 textarea 的完整大小，而不是其内容。

该页面的代码如下:

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

   var adjustedHeight = text.clientHeight;
   if ( !maxHeight || maxHeight > adjustedHeight )
   {
      adjustedHeight = Math.max(text.scrollHeight, adjustedHeight);
      if ( maxHeight )
         adjustedHeight = Math.min(maxHeight, adjustedHeight);
      if ( adjustedHeight > text.clientHeight )
         text.style.height = adjustedHeight + "px";
   }
}

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

Answer 1

完整而简单的解决方案

更新2023-06-08(添加了原生js，用于通过js注入(inject)进行更新)

以下代码将起作用:

• 按键输入。
• 粘贴文本(右键单击并按 ctrl+v)。
• 带有剪切文本(右键单击并按 ctrl+x)。
• 带有预加载的文本。
• 所有文本区域的(多行文本框)全站点范围。
• 使用Firefox(已测试 v31-109)。
• 使用 Chrome(已测试 v37-108)。
• 使用IE(已测试 v9-v11)。
• 使用 Edge(已测试 v14-v108)。
• 使用 IOS Safari。
• 使用 Android 浏览器。
• 使用 JavaScript 严格模式。

<小时/>

选项 1 (使用 jQuery)

此选项需要 jQuery并已经过测试并可与 1.7.2 - 3.6.3

配合使用

简单 (将此 jQuery 代码添加到您的主脚本文件中，然后就不用管它了。)

$("textarea").each(function () {
  this.setAttribute("style", "height:" + (this.scrollHeight) + "px;overflow-y:hidden;");
}).on("input", function () {
  this.style.height = 0;
  this.style.height = (this.scrollHeight) + "px";
});

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.6.3.min.js"></script>
<textarea placeholder="Type, paste, cut text here...">PRELOADED TEXT.
This JavaScript should now add better support for IOS browsers and Android browsers.</textarea>
<textarea placeholder="Type, paste, cut text here..."></textarea>

Test on jsfiddle

<小时/>

选项 2(纯 JavaScript)

简单 (将此 JavaScript 添加到您的主脚本文件中，然后就不用管它了。)

const tx = document.getElementsByTagName("textarea");
for (let i = 0; i < tx.length; i++) {
  tx[i].setAttribute("style", "height:" + (tx[i].scrollHeight) + "px;overflow-y:hidden;");
  tx[i].addEventListener("input", OnInput, false);
}

function OnInput() {
  this.style.height = 0;
  this.style.height = (this.scrollHeight) + "px";
}

<textarea placeholder="Type, paste, cut text here...">PRELOADED TEXT. This JavaScript should now add better support for IOS browsers and Android browsers.</textarea>
<textarea placeholder="Type, paste, cut text here..."></textarea>

Test on jsfiddle

<小时/>

选项 3(jQuery 扩展)

如果您想对文本区域应用进一步的链接，并且希望自动调整大小，则很有用。

jQuery.fn.extend({
  autoHeight: function () {
    function autoHeight_(element) {
      return jQuery(element)
        .css({ "height": 0, "overflow-y": "hidden" })
        .height(element.scrollHeight);
    }
    return this.each(function() {
      autoHeight_(this).on("input", function() {
        autoHeight_(this);
      });
    });
  }
});

使用 $("textarea").autoHeight() 调用

<小时/>

通过 JavaScript 更新 TEXTAREA

通过 JavaScript 将内容注入(inject)文本区域时，附加以下代码行来调用调整大小函数。

jQuery

$("textarea").trigger("input");

纯 JavaScript

document.getElementsByTagName("textarea")[0].dispatchEvent(new Event('input', { bubbles: true }));

<小时/>

预设文本区域高度

要修复文本区域的初始高度，您需要添加另一个条件:

const txHeight = 16;
const tx = document.getElementsByTagName("textarea");

for (let i = 0; i < tx.length; i++) {
  if (tx[i].value == '') {
    tx[i].setAttribute("style", "height:" + txHeight + "px;overflow-y:hidden;");
  } else {
    tx[i].setAttribute("style", "height:" + (tx[i].scrollHeight) + "px;overflow-y:hidden;");
  }
  tx[i].addEventListener("input", OnInput, false);
}

function OnInput(e) {
  this.style.height = 0;
  this.style.height = (this.scrollHeight) + "px";
}

<textarea placeholder="Type, paste, cut text here...">PRELOADED TEXT. This JavaScript should now add better support for IOS browsers and Android browsers.</textarea>
<textarea placeholder="Type, paste, cut text here..."></textarea>