什么是placeholder？

答：HTML5中的一個(gè)新屬性，用于表單元素中，規(guī)定可描述輸入字段預(yù)期值的簡(jiǎn)短的提示信息，也就是表單元素中的預(yù)留文本。適用于下面的 input 類型：text、search、url、tel、email 和 password，還適用于textarea元素。

---

?

placeholder有哪些兼容性問(wèn)題？

答：1、placeholder在IE9及以前的瀏覽器中不能被支持

　　2、在chrome和Firefox中，當(dāng)input框獲取焦點(diǎn)時(shí)，placeholder的文字依然在，只有在input中輸入內(nèi)容之后才會(huì)消失；而在IE和Safari中，當(dāng)input框獲取焦點(diǎn)時(shí)placeholder的文字就消失了

　　3、默認(rèn)情況下placeholder的文字是灰色的，當(dāng)給input設(shè)置color時(shí)，在chrome和Safari中，placeholder的文字顏色不變；而在Firefox和IE中，placeholder文字的顏色會(huì)變成color的值

　　4、當(dāng)希望placeholder的文字和input的輸入內(nèi)容在input框中都居中的時(shí)候，簡(jiǎn)單的方法就是設(shè)置text-align:center，但是在某些瀏覽器中（目前我發(fā)現(xiàn)的就是三星手機(jī)自帶的瀏覽器），設(shè)置之后placeholder的文字依然靠左

---

?

下面對(duì)這些問(wèn)題進(jìn)行說(shuō)明：

　　1、placeholder在IE9及以前的瀏覽器中不能被支持

　　我自己還不會(huì)，等我會(huì)了再補(bǔ)上

　　2、在chrome和Firefox中，當(dāng)input框獲取焦點(diǎn)時(shí)，placeholder的文字依然在，只有在input中輸入內(nèi)容之后才會(huì)消失；而在IE和Safari中，當(dāng)input框獲取焦點(diǎn)時(shí)placeholder的文字就消失了

　　這個(gè)因?yàn)闆](méi)有太大影響，所以暫不考慮，要是真的希望在所有瀏覽器中表現(xiàn)一模一樣，那就用我下面的label替代法吧

　　3、默認(rèn)情況下placeholder的文字是灰色的，當(dāng)給input設(shè)置color時(shí)，在chrome和Safari中，placeholder的文字顏色不變；而在Firefox和IE中，placeholder文字的顏色會(huì)變成color的值

　　可單獨(dú)為placeholder文本設(shè)置color，給input設(shè)置顏色之后就不會(huì)影響到placeholder了

1 ::-moz-placeholder{color:#999;} //Firefox 2 ::-webkit-input-placeholder{color:#999;} //chrome和Safari 3 :-ms-input-placeholder{color:#999;} //IE10

　　4、當(dāng)希望placeholder的文字和input的輸入內(nèi)容在input框中都居中的時(shí)候，簡(jiǎn)單的方法就是設(shè)置text-align:center，但是在某些瀏覽器中（目前我發(fā)現(xiàn)的就是三星手機(jī)自帶的瀏覽器），設(shè)置之后placeholder的文字依然靠左

　　這里我寫了一個(gè)用label代替placeholder的demo，可以解決以上所有問(wèn)題，貼出代碼

1 <div id="inputPlaceholder"> 2 <input type="text" value="" id="inputBox" onfocus="OnFocus()" onblur="OnBlur()" autocomplete="off"> 3 <label for="inputBox" id="labelPlaceholder">請(qǐng)輸入號(hào)碼</label> 4 </div> 1 function OnFocus () { 2 document.getElementById("labelPlaceholder").style.display="none"; //當(dāng)input獲取焦點(diǎn)時(shí)，label隱藏 3 } 4 function OnBlur () { 5 if (document.getElementById("inputBox").value=="") { 6 document.getElementById("labelPlaceholder").style.display="block"; //當(dāng)input失去焦點(diǎn)時(shí)，如果input框中有內(nèi)容則label隱藏，如果沒(méi)有內(nèi)容則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;}

　　效果圖就是這樣

?

　　如果有錯(cuò)誤or不足，歡迎指正

轉(zhuǎn)載于:https://www.cnblogs.com/ahutyaoyj/p/4453944.html

總結(jié)

以上是生活随笔為你收集整理的placeholder兼容性问题以及用label代替placeholder的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。