如何让textarea的高度自适应

Posted 2023-04-03

extarea文本域轻松实现高度自适应
demo演示地址：http://www.xuanfengge.com/demo/201308/textarea/demo1.html
因为textarea不支持自适应高度，就是定好高度或者是行数之后，超出部分就会显示滚动条，看起来不美观。
而用DIV来模拟时，首先遇到的问题是：div怎么实现输入功能？
可能我们还是第一次见到这个属性contenteditable，如一个普通的block元素上加个contenteditable="true"就实现编辑，出现光标了。如

<div contenteditable="true"></div>

contenteditable属性虽是HTML5里面的内容，但是IE似乎老早就支持此标签属性了。所以，兼容性方面还是不用太担心的。
CSS代码

.textarea

width:
400px;

min-height:
20px;

max-height:
300px;

_height:
120px;

margin-left:
auto;

margin-right:
auto;

padding:
3px;

outline:
0;

border:
1px
solid
#a0b3d6;

font-size:
12px;

line-height:
24px;

padding:
2px;

word-wrap:
break-word;

overflow-x:
hidden;

overflow-y:
auto;

border-color:
rgba(82,
168,
236,
0.8);

box-shadow:
inset
0
1px
3px
rgba(0,
0,
0,
0.1),
0
0
8px
rgba(82,
168,
236,
0.6);



HTML代码

<div class="textarea" contenteditable="true"><br /></div>

CSS代码中，因为IE6不支持min/max，所以做了hack，其他的也好理解。 参考技术A HTML网页中textarea的高度自适应怎么实现方法

textarea高度自适应问题

textarea中的文字如果过多，就会产生滚动条，一本分文本被遮盖住，不能看到所有的文本。

那么，如何才能让textarea的高度随输入内容多少，可以自动的改变高度呢？

解决思想：

1 利用contenteditable属性，让div变得可以编辑。

    优点：方便，简介

    缺点：提交数据不方便

2 利用js，动态改变textarea的高度

    优点：提交数据很方便

    缺点：要写好几段代码

我不禁提出质疑：在设计textarea这个标签的时候，专家们为何不给他一个可以高度自适应的属性呢？

谁能回答我？