placeholder兼容性问题以及用label代替placeholder

什么是placeholder？

答：HTML5中的一个新属性，用于表单元素中，规定可描述输入字段预期值的简短的提示信息，也就是表单元素中的预留文本。适用于下面的 input 类型：text、search、url、tel、email 和 password，还适用于textarea元素。

---

 

placeholder有哪些兼容性问题？

答：一、placeholder在IE9及之前的浏览器中不能被支持

　　二、在chrome和Firefox中，当input框获取焦点时，placeholder的文字依然在，只有在input中输入内容以后才会消失；而在IE和Safari中，当input框获取焦点时placeholder的文字就消失了

　　三、默认状况下placeholder的文字是灰色的，当给input设置color时，在chrome和Safari中，placeholder的文字颜色不变；而在Firefox和IE中，placeholder文字的颜色会变成color的值

　　四、当但愿placeholder的文字和input的输入内容在input框中都居中的时候，简单的方法就是设置text-align:center，可是在某些浏览器中（目前我发现的就是三星手机自带的浏览器），设置以后placeholder的文字依然靠左

---

 

下面对这些问题进行说明：

　　一、placeholder在IE9及之前的浏览器中不能被支持

　　我本身还不会，等我会了再补上

　　二、在chrome和Firefox中，当input框获取焦点时，placeholder的文字依然在，只有在input中输入内容以后才会消失；而在IE和Safari中，当input框获取焦点时placeholder的文字就消失了

　　这个由于没有太大影响，因此暂不考虑，要是真的但愿在全部浏览器中表现如出一辙，那就用我下面的label替代法吧

　　三、默认状况下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

　　四、当但愿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不足，欢迎指正