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不足，歡迎指正