Textarea随着内容的增长而缩小到最大高度

Question

首先，我知道这里有类似的问题，虽然没有一个专门做我的标题所要求的。

我正在尝试创建一个简单的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;
}

WORKING EXAMPLE

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

Answer 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;}

Javscript：

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