将 CSS 属性自动调整到 textarea答案

【问题标题】：Auto fit CSS attribute to textarea将 CSS 属性自动调整到 textarea
【发布时间】：2010-10-01 06:05:18
【问题描述】：

我正在开发网络应用程序。

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

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

在这种情况下，宽度应该是固定的，即宽度：98%；（就我而言）只有高度需要增长。所以文本区域应该存在滚动条。

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

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

谢谢，

普拉文

【问题讨论】：

我不确定是否可以直接使用 CSS。
所以您不想使用 javascript 或 jquery，但这就是您标记问题的原因？你确实想使用 CSS，但你不使用 CSS 标签？考虑一下我的想法

标签： javascript jquery html

【解决方案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

【讨论】：

非常感谢您提供这个....bt 它似乎与
相关，我如何将它提供给？
它确实适用于div，textarea已经具有可编辑的内容。但是，问题在于textarea 不会以您想要的方式使用height: auto。所以我使用了div 来强制执行这种行为。

【解决方案2】：

如果您只是在 textarea 中显示文本，而不是使用它从用户那里获取更多内容输入，那么请考虑使用 div 并将其样式设置为类似于 textarea。

我看到的另一件事是一个自动扩展的文本区域，它会随着你的输入而增长。

请看这里：http://james.padolsey.com/javascript/jquery-plugin-autoresize/

【讨论】：

【解决方案3】：

这对于纯 CSS 是不可能的，你需要使用 JavaScript

【讨论】：

谢谢，我也有同样的想法，如果我能得到一些符合我要求的 javascript 语句，我很好。