输入字段随着您的输入而变高

我想知道如何创建一个具有自动可调高度的文本输入，以便它变得更高以适合您的文本？例如，如果我开始输入一个段落，它会从几行扩展以适合该段落。

这是我目前所拥有的：

#commenttext {
  width: 413px;
  min-height: 22px;
  max-height: 100%;
  display: inline;
  font-size: 11px;
  color: #777777;
  word-wrap: break-word;
  font-family: "Open Sans", "Tahoma";
  top: 7px;
  position: relative;
  left: 7px;
  padding-left: 7px;
}

<form action="" method="POST">
  <input type="text" id="commenttext">
</form>

但这只是一个普通的文本区域。

当我输入更多行时，如何使文本区域变得更高？我需要 JavaScript 吗？

这是一个仅 CSS 的解决方案：使用div with contenteditable设置为 true。

<div contenteditable="true"
    style="width:200px;min-height:20px;border:1px solid #ccc;"></div>

看到这个JSFiddle http://jsfiddle.net/superscript18/afHm8/举个例子。

EDIT:如果您希望能够提交此文本，您将需要一点 javascript 将其放入input场地。将其添加到您的表单中：

<form onsubmit="document.getElementById('hidden_data').value=document.getElementById('showing_data').innerHTML;">
    <input id="hidden_data" name="data" type="hidden"/>
    <div id="showing_data" contenteditable="true"
        style="width:200px;min-height:20px;border:1px solid #ccc;"></div>
</form>

这会将内容div进入一个隐藏的input字段，因此它将通过以下方式提交到服务器POST与其他任何东西。

请参阅此（已更新）JSFiddle http://jsfiddle.net/superscript18/afHm8/2/举个例子。