将CSS属性自动调整到textarea

Question

我正在开发Web应用程序.

我想使用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