TextArea 元素 - 适合内容的默认大小答案

【问题标题】：TextArea element - default size to fit contentTextArea 元素 - 适合内容的默认大小
【发布时间】：2013-04-11 17:59:19
【问题描述】：

如果我在 textarea 元素上设置固定宽度，是否有一种优雅的方法可以将默认高度设置为允许其所有内容适合的大小？

我希望避免在 jquery 中对任何会比较 text.length 并尝试将值等同于高度的东西进行硬编码，但也许这是唯一的方法，如果可能的话，我希望看到一些原生 css 规则但我似乎想不出任何想法。

我创建了一个小提琴来说明我想要完成的事情。 http://jsfiddle.net/edZgm/

代码如下：

CSS：

textarea {
    overflow: hidden;
}

jQuery：

$('document').ready(function () {
    $('textarea')
        .width(500);

    //I have a width set, but see how the height defaults to a rediculously small amount.
    //I'd like to have the height default to fit everything on load.

});

HTML：

<textarea> ... lots of text </textarea>

提前谢谢你。

【问题讨论】：

我相信它是可行的（使用 jQuery，而不是 CSS），但很难。我认为您可以在页面和 textarea 内容加载后使用 jquery 调整 textarea 的高度，然后通过计算字符和文本行数来计算所需的高度，但这在很大程度上取决于该文本的字体和 CSS。如果你使用固定宽度的字体会更容易。
你可能想看看autogrow插件在jQuery中做了什么。
啊，这很好，我什至没有考虑字体大小。嗯，那么它几乎肯定必须是基于 JS/JQ 的......可能需要查看字体大小和行高，然后确定内容长度并确定每行可以容纳多少个字符，计算行，并根据行号乘以行高来计算高度。
哈哈，当我打字的时候，我在想……我应该写一个插件来监控每一次击键，并在必要时调整每个条目的 textarea 大小
@karthikr thk 你，这对我正在寻找的东西来说是正确的。

标签： jquery html css

【解决方案1】：

让评论成为未来参考的答案：

结帐jquery-autogrow

【讨论】：

【解决方案2】：

有这个 jQuery 插件，Autosize。
http://www.jacklmoore.com/autosize/

这是您使用该插件更新的小提琴。
http://jsfiddle.net/edZgm/3/

刚刚加载了插件并将其添加到您的代码中。

    $('textarea')
    .autosize();

【讨论】：