textarea高度自适应

2018-07-06

用div来模拟textarea实现的,用CSS控制样式,不用JS  

而用DIV来模拟时,首先遇到的问题是:div怎么实现输入功能?
一个普通的block元素上加个contenteditable="true"就实现编辑,出现光标了。  

<div class="test-textarea" contenteditable="true" ><br /></div>
.test-textarea {
width: 400px;
min-height: 26px;
line-height: 20px;
_height: 30px;
/* max-height: 150px;*/
margin-left: auto;
margin-right: auto;
padding: 3px;
outline: 0;
border: 1px solid #ccc;
font-size: 12px;
word-wrap: break-word;
overflow-x: hidden;
overflow-y: auto;
-webkit-user-modify: read-write-plaintext-only;
border-radius: 4px;
}