javascript - 随内容增长和收缩到最大高度的文本区域

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，仅使用文本输入或文本区域即可复制上述示例？

Answer 1

我一直在寻找同一问题的解决方案，并意识到使用 flex javascript 解决方案似乎是最好的全能解决方案。在所有现代浏览器中测试，包括回到 IE9:

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

在文本区域上使用您选择的最大高度，以防止高度超出您想要的限制。

HTML:

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

CSS:

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

Javascript:

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