文本区域元素 - 默认大小适应内容

Question

如果我在textarea元素上设置了固定宽度，是否有一种优雅的方法来设置默认高度，以使其所有内容都适合其中？

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

我创建了一个演示我要完成的内容的fiddle。 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>

提前感谢您。

- Dylan Hayes

---

我相信这是可行的（使用jQuery而不是CSS），但很困难。我认为在页面和文本区域内容加载后，您可以使用jQuery调整文本区域的高度，然后通过计算字符和文本行数来计算所需的高度，但这高度高度取决于您的字体和CSS。如果您使用等宽字体，则会更容易些。 - Revent

你可能想看看jQuery中的autogrow插件是做什么的。 - karthikr

啊，那是个好点子，我甚至没有考虑字体大小。嗯，那几乎肯定要基于JS/JQ... 需要先看一下字体大小和行高，然后确定内容长度并计算每行可以容纳多少字符，计算出行数，再根据行数乘以行高来确定高度。 - Dylan Hayes

哈哈，当我输入这个的时候，我在想...我应该编写一个插件来监控每个按键输入，并根据需要调整文本区域大小。 - Dylan Hayes

@karthikr 谢谢，这正是我所寻找的。 - Dylan Hayes

Answer 1

有一个名为Autosize的jQuery插件。
http://www.jacklmoore.com/autosize/ 这是你的fiddle，已经使用了该插件。
http://jsfiddle.net/edZgm/3/ 只需加载该插件并将此代码添加到您的代码中即可。

    $('textarea')
    .autosize();

- Arbel

Answer 2

将评论作为未来参考的答案：

查看jquery-autogrow。

- karthikr