实现placeholder效果的方案汇总

由于placeholder是html5的新属性，可想而知，仅支持html5的浏览器才支持placeholder，目前最新的firefox、chrome、safari以及ie10都支持，ie6到ie9都不支持。

 

placeholder是html5<input>的一个属性，它提供可描述输入字段预期值的提示信息（hint）， 该提示会在输入字段为空时显示。高端浏览器支持此属性（ie10/11在获得焦点时文字消失），ie6/7/8/9则不支持。为了兼容各主流浏览器并使其呈现效果保持一致，以下三套方案仅供参考。

方案一：

摒弃原始属性placeholder，为input添加一个兄弟节点span，并为span设置绝对定位（父节点为position: relative;），使其位于input之上。html代码片段如下：
 

1. <li> 
2.   <div class="inputMD" style="position: relative;"> 
3.     <input class="phInput" type="text" /> 
4.     <span class="phText" style="clear: both; height: 33px; line-height: 33px; color: #aaa; position: absolute; left: 10px; top: 5px;">手机号码/邮箱地址</span> 
5.   </div> 
6. </li> 
7. <li> 
8.   <div class="inputMD" style="position: relative;"> 
9.     <input class="phInput" type="password" /> 
10.     <span class="phText" style="clear: both; height: 33px; line-height: 33px; color: #aaa; position: absolute; left: 10px; top: 5px;">请输入密码</span> 
11.   </div> 
12. </li>