关于textarea文本域高度自适应文字的解决方法

关于textarea文本域的高度除了设置固定高度外,不会随着文本内容增加而高度自适应的问题.

解决这个问题的方法我们可以利用div模拟textarea的方式

<div id="textarea"  contenteditable="true" placeholder="请输入文字,不得少于100字"></div>

contenteditable="true"这个属性实现了div文本输入的功能

css上给div的高度设置成auto 这样高度就实现了自适应

当然用div模拟textarea时,我们没办法使用placeholder的属性.

当然这个一度让我烦躁的缺点也是有解决的办法的.

给div添加  placeholder="xxxx" 的属性

同时为div设置css,代码如下

.textarea{

box-sizing: border-box;

width: 100%;

height: auto;

padding: 5px;

border:1px solid #ccc;

}

.textarea:empty:before{

content: attr(placeholder);

color:#bbb;

}

.textarea:focus:before{

content:none;

}

大功告成!

刚入行,只是记录自己遇到的问题,如果恰好能帮助遇到同样问题的你,那最好不过了.

下次见   --Matcha(抹茶)