div生成自适应的输入框

同样是前任的坑，好好的textarea不用干吗要div模拟

html：

<!--多行文本-->
<div contenteditable="true" class="multipletext" placeholder="请在此填写登记内容"></div>

解析：带有contenteditable属性的div可作为输入框（div可以根据内容自动调整高度哦）

css：

.multipletext{  padding: 11px 15px;border-bottom: 1px solid #c8c7cc;min-height: 60px}
.multipletext:empty:before{content: attr(placeholder);color:#BBBBBB;}
.multipletext:focus:before{content:none;}  /*获得焦点时内容为空*/

解析：div它是不支持placeholder属性的。因此css中的.multipletext:empty:before{content: attr(placeholder);color:#BBBBBB;}，清空div，将attr结构中的placeholder的值赋予before伪类的content内容

最后生成的div可自动伸缩

♦ 坑：div如果设置了display: -webkit-box，使用伸缩盒子布局的时候，删除一行文字，div高度会无法缩回。

解决方法：可以使用浮动布局如float：left

♦  引申： isContentEditable属性

element.isContentEditable

• 1

通过isContentEditable来判断某个元素是否可编辑。 
如果该元素可编辑，返回true；否则，false。