什么是placeholder？
答：HTML5中的一个新属性，用于表单元素中，规定可描述输入字段预期值的简短的提示信息，也就是表单元素中的预留文本。适用于下面的 input 类型：text、search、url、tel、email 和 password，还适用于textarea元素。
placeholder有哪些兼容性问题？
答：1、placeholder在IE9及以前的浏览器中不能被支持
2、在chrome和Firefox中，当input框获取焦点时，placeholder的文字依然在，只有在input中输入内容之后才会消失；而在IE和Safari中，当input框获取焦点时placeholder的文字就消失了
3、默认情况下placeholder的文字是灰色的，当给input设置color时，在chrome和Safari中，placeholder的文字颜色不变；而在Firefox和IE中，placeholder文字的颜色会变成color的值
4、当希望placeholder的文字和input的输入内容在input框中都居中的时候，简单的方法就是设置text-align:center，但是在某些浏览器中（目前我发现的就是三星手机自带的浏览器），设置之后placeholder的文字依然靠左
下面对这些问题进行说明：
1、placeholder在IE9及以前的浏览器中不能被支持
我自己还不会，等我会了再补上
2、在chrome和Firefox中，当input框获取焦点时，placeholder的文字依然在，只有在input中输入内容之后才会消失；而在IE和Safari中，当input框获取焦点时placeholder的文字就消失了
这个因为没有太大影响，所以暂不考虑，要是真的希望在所有浏览器中表现一模一样，那就用我下面的label替代法吧
3、默认情况下placeholder的文字是灰色的，当给input设置color时，在chrome和Safari中，placeholder的文字颜色不变；而在Firefox和IE中，placeholder文字的颜色会变成color的值
可单独为placeholder文本设置color，给input设置颜色之后就不会影响到placeholder了
1 ::-moz-placeholder{color:#999;} //Firefox
2 ::-webkit-input-placeholder{color:#999;} //chrome和Safari
3 :-ms-input-placeholder{color:#999;} //IE10
4、当希望placeholder的文字和input的输入内容在input框中都居中的时候，简单的方法就是设置text-align:center，但是在某些浏览器中（目前我发现的就是三星手机自带的浏览器），设置之后placeholder的文字依然靠左
这里我写了一个用label代替placeholder的demo，可以解决以上所有问题，贴出代码
1 <div id="inputPlaceholder"> 2 <input type="text" value="" id="inputBox" onfocus="OnFocus()" onblur="OnBlur()" autocomplete="off"> 3 <label for="inputBox" id="labelPlaceholder">请输入号码</label> 4 </div>
1 function OnFocus () {
2 document.getElementById("labelPlaceholder").style.display="none"; //当input获取焦点时，label隐藏
3 }
4 function OnBlur () {
5 if (document.getElementById("inputBox").value=="") {
6 document.getElementById("labelPlaceholder").style.display="block"; //当input失去焦点时，如果input框中有内容则label隐藏，如果没有内容则label显示
7 } else{
8 document.getElementById("labelPlaceholder").style.display="none";
9 };
10
11 }
1 #inputPlaceholder{
2 width: 100%;
3 height: auto;
4 position: relative;
5 }
6 #inputBox{
7 width: 100%;
8 height: 30px;
9 line-height:30px;
10 border:1px #DBEAF9 solid;
11 border-radius:5px;
12 background-color:#fff;
13 text-align:center;
14 font-size: 14px;
15 padding: 0;
16 margin: 0;
17 color:#333;
18 }
19 #labelPlaceholder{
20 width: 100%;
21 height: 32px;
22 line-height: 32px;
23 color:#999;
24 font-size: 14px;
25 position: absolute;
26 top: 0;
27 left: 0;
28 padding: 0;
29 margin: 0;
30 text-align:center;
31 }
32 ::-moz-placeholder{color:#999;}
33 ::-webkit-input-placeholder{color:#999;}
34 :-ms-input-placeholder{color:#999;}
效果图就是这样
如果有错误or不足，欢迎指正