将CSS属性自动调整到textarea

时间:2010-10-01 06:05:18

标签: javascript jquery html

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

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

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

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

我只需要一个CSS,这样在申请textarea后,它应该像<DIV>一样自动增长。

请大家做建议,这可能是使用CSS。如果这是不可能的,那么如果我得到javascript语句来实现我的要求,那么就可以了。

谢谢,

普拉

3 个答案:

答案 0 :(得分:5)

这在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

发布演示

答案 1 :(得分:2)

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

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

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

答案 2 :(得分:1)

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