无意中看到一篇博客介绍了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属性详解