随内容增长和缩小到最大高度的文本区域答案

【问题标题】：Textarea that grows and shrinks with content to a maximum height随内容增长和缩小到最大高度的文本区域
【发布时间】：2014-09-06 12:57:56
【问题描述】：

首先，我知道这里有人问过与此类似的问题，尽管他们都没有专门按照我的标题所要求的。

我正在尝试创建一个简单的 textarea 输入，该输入会根据其内容在高度上增长和缩小，但仅限于最大高度。一旦达到最大高度，它将垂直滚动。

我遇到了一个纯 CSS 和 HTML 解决方案，但不幸的是它不是跨浏览器，并且可能有很多错误。但它应该让大家对我想要实现的目标有一个很好的了解。

HTML：

<div contenteditable>
    type here...
</div>

CSS：

div[contenteditable] {
    border: 1px solid black;
    max-height: 100px;
    overflow-y: auto;
    overflow-x: hidden;
    width: 200px;
}

是否有不使用contenteditable 的解决方案，可以仅使用文本输入或文本区域复制上述示例？

【问题讨论】：

【解决方案1】：

我一直在寻找相同问题的解决方案，并意识到使用弹性 javascript 解决方案似乎是最好的全方位解决方案。在所有现代浏览器中进行了测试，包括回到 IE9：

在此处查看工作演示： http://jsfiddle.net/mupbrtpv/

在 textarea 上使用您选择的最大高度，以防止高度超出您所需的限制。

HTML：

<textarea id="description" placeholder="input your text here"></textarea>

CSS：

textarea#description{width: 300px; max-height: 400px;}

JavaScript：

$('#description').elastic();

【讨论】：

效果很好。虽然，它似乎总是在当前正在输入的行下方有一个额外的行。有没有办法去掉这个？
@fizzix 我不太熟悉它是如何工作的，只是在你按下回车键后，额外的行似乎会在几分之一秒内被使用，或者在文本区域。但似乎确实在一秒钟后，它会再次创建一个“新”空白行——可能是为了帮助提示用户该框有更多可用空间。我不知道如何撤消它。