div模拟textarea且高度自适应
需求
我们知道文本超出 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 监听高度变化,这个更实用,一个字,怎么简单怎么来!