如何自动调整文本区域的高度？答案

【问题标题】：How to auto-size a textarea in height?如何自动调整文本区域的高度？
【发布时间】：2010-12-28 17:49:00
【问题描述】：

我将文本区域的宽度设置为 100%，但现在我需要知道一行可以容纳多少个字符。

我正在尝试编写一个 javascript 函数来自动增长/缩小文本区域。我试图避免使用 jquery，因为我只需要这个功能。

我的逻辑是rows = textarea.value.split('\n')，遍历rows 和count += rows[i].length/textarea.cols，然后是count += rows.length，最后是textarea.rows = count。唯一的问题是count 太大了，因为textarea.cols 太小了。

【问题讨论】：

这是一个棘手的问题。对于大多数字体，不可能预测固定数量的允许字符，因为每个字符都有不同的宽度。您需要使用像 courier 这样的等宽字体来执行此操作
为什么要使用 JavaScript？你能用CSS吗？ #textareaId { 宽度：100%; }
@Pekka - 总是喜欢阅读你的答案/cmets
@ifaour 谢谢！在这里写作还是很有趣的，甚至只是在 cmets 中大声思考。
Creating a textarea with auto-resize的可能重复

标签： javascript html textarea

【解决方案1】：

此函数会将元素的高度（在您的情况下为 textarea）设置为浏览器的默认高度。如果这导致出现滚动条，高度将切换到实际需要的高度。

function autoHeight(element){
    element.style.height='auto';
    element.style.height=element.scrollHeight+'px';
}

如果您不喜欢浏览器的默认高度，当然可以将其更改为您自己的其他默认值。

【讨论】：

+1 是我发现的关于该主题的最佳答案之一。我唯一要改变的一件事是使用element.style.height=0; 来确保textarea 的高度尽可能小。否则，如果是我使用的浏览器，它至少是两行。
谢谢。您还可以在函数中添加minHeight 参数。高度为 0 可能会导致闪烁，例如，如果您在 keyup 事件中使用它。
迄今为止我见过的最佳解决方案！

【解决方案2】：

试试这个并享受：

var textarea = document.getElementById("YourTextArea");
var limit = 50; //height limit

textarea.oninput = function() {
  textarea.style.height = "";
  textarea.style.height = Math.min(textarea.scrollHeight, limit) + "px";
};

textarea {
    width: 99%;
}

&lt;textarea id="YourTextArea"&gt;&lt;/textarea&gt;

【讨论】：