纯div+css模拟实现input以及pleacehold的效果

首先是dom结构：

<div class="box_border">
				<div contenteditable="true"  class="aaaa"  placeholder="电话"></div>
				<div contenteditable="true"  class="aaaa"  placeholder="验证码"></div>						
				<button id="btn">提交</button>
</div>

这里contenteditable=“true”，让文本处于可编辑状态。

然后定义input，不不不！是div的样式。

最后关键的一点，使用伪类以及伪元素实现pleasehold的出现和消失。

.box_border div:empty:before{
	content: attr(placeholder);
	color:#40;
	font-size: 25px;
}
.box_border div:focus:before{
	content:none;
}

向后台提交数据的话，就必须要用的js了，为button添加事件处理函数，获取两个div里的值。呸！获取两个div里的文本内容，通过ajax向后台提交就可以了。

如图：欢迎交流！