javascript - 自动将 CSS 属性调整到文本区域

Question

我正在开发 Web 应用程序。

我想使用 CSS 将自动高度应用于文本区域，不想使用任何脚本、jquery 插件和其他东西。

将类(即样式属性)应用到文本区域后，它应该根据其中的内容自动增加它的高度而不是宽度。

在这种情况下，宽度应该是固定的，即 width: 98%; (在我的例子中)只有高度需要增长。因此文本区域应该存在滚动条。

我只需要一个 CSS，以便在应用到 textarea 后，它应该像 <DIV> 一样自动增长.

请大家建议，这是否可以使用 CSS。如果这是不可能的，那么如果我得到 javascript 语句来满足我的要求，那就好了。

谢谢，

普拉文

Answer 1

它在 html/CSS 中是半可行的。然而，浏览器支持通常需要注意，因为它使用 html5 的 contenteditable，它需要一个相当现代的浏览器。

也就是说，以下工作(在 Chrome/Ubuntu 10.04 中):

<div id="wrap">
    <div id="editThis" contenteditable>
    </div>
</div>

使用以下 CSS:

div#editThis {
    min-height: 4em;
    height: auto;
    width: 50%;
    margin: 0 auto;
}
div#editThis:hover,
div#editThis:focus {
    border: 1px solid #000;
}

演示发布于 jsbin