Question

我正在处理网络应用程序。

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

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

在这种情况下，宽度应固定，即宽度：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

发布演示

Answer 2

如果您只是在textarea中显示文本而不使用它来从用户那里获得更多内容输入，那么请考虑使用div并将其设置为看起来像textarea。

我看到的另一件事是一个自动扩展的textarea，当你输入时会增加高度。

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

Answer 3

纯CSS无法实现这一点，您需要使用JavaScript

将CSS属性自动调整到textarea

3 个答案: