无意中看到一篇博客介绍了contenteditable这个属性——不需用JS，只需在div里加上contenteditable="true"，即可实现div模拟textrarea（文本域），让textrarea的高度随内容的增加而自动增加。当时就惊呆了，居然还有这种操作！！！
<div id="textarea" contenteditable="true"></div>
contenteditable属性介绍：http://www.w3school.com.cn/html5/att_global_contenteditable.asp
下面是一个小demo，加了一些样式修饰，然后把文本域也加上了，方便对比。
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8" />
<title></title>
</head>
<style>
#textarea {
width: 300px;
border: 1px solid #ccc;
min-height: 200px;
max-height: 600px;
overflow: auto;
font-size: 14px;
outline: none;
margin-bottom: 20px;
-webkit-user-modify: read-write-plaintext-only;
/*可以让元素既可以编辑，又只能输入纯文本，并且不会有富文本，但目前只有谷歌支持，建议移动端用*/
}
</style> <body>
<div id="textarea" contenteditable="true">王尼玛</div> <textarea name="" rows="10" cols="50">大头死变态</textarea> </body> </html>
注：上面demo中，有一句代码 -webkit-user-modify: read-write-plaintext-only; 可能小伙伴们看着有点蒙。
加这句代码是因为用contenteditable属性实现div模拟textarea高度自增长以后，可以复制富文本到文本域里，这句代码就是为了不让复制富文本，只能输入纯文本
什么是富文本：https://zhidao.baidu.com/question/345297157.html
-webkit-user-modify: read-write-plaintext-only属性详解