需求
我们知道文本超出 textarea 高度后，textarea 就会出现滚动条，需求就是让 textarea 高度跟随文本高度变化，屏蔽滚动条，原来做过用js去监听文本行数，然后改变文本框的高度，这实在是麻烦，而且效果不佳，接下来就用简单的方法来实现。
实现
很简单，给 div 加上H5新属性 contenteditable 就行了，来看：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .test{ width: 200px; min-height: 50px; border: 1px solid #999999; } </style> </head> <body> <div class="test" contenteditable="true"></div> </body> </html>
效果大概就是这样，此时高度会跟随内容变化
emmm...貌似不比textarea好看，而且 div 没有 placeholder 属性，OK优化一下，再用css模拟 placeholder 属性，请看：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .test{ width: 200px; min-height: 50px; font-size: 12px; padding: 5px; border: 1px solid #999999; } .test:empty::before{ color: #EEEEEE; content: attr(placeholder); } </style> </head> <body> <div class="test" contenteditable="true" placeholder="亲，请输入您的评价~"></div> </body> </html>
效果是这样
个人觉得不错了，如果觉得丑那就再优化一下样式，比起用 js 监听高度变化，这个更实用，一个字，怎么简单怎么来！