739
技術社區[雲棲]
placeholder在不同瀏覽器下的表現及兼容方法
1、什麼是placeholder？
placeholder是html5新增的一個屬性，當input或者textarea設置了該屬性後，該值的內容將作為灰字提示顯示在文本框中，當文本框獲得焦點（或輸入內容）時，提示文字消失。
寫法如下：
2、placeholder的瀏覽器兼容性和在不同瀏覽器下的表現
由於placeholder是html5的新屬性，可想而知，僅支持html5的瀏覽器才支持placeholder，目前最新的firefox、chrome、safari以及ie10都支持，ie6到ie9都不支持。
下麵是其在各個瀏覽器下的顯示效果：
firefox：
placeholder在不同瀏覽器下的表現及兼容方法
chrome：
placeholder在不同瀏覽器下的表現及兼容方法
safari：
placeholder在不同瀏覽器下的表現及兼容方法
ie10：
placeholder在不同瀏覽器下的表現及兼容方法
可以看出，placeholder的文字在各個瀏覽器下基本都是淡灰色顯示。
不同的地方在於，在ff和chrome下，輸入框獲得焦點時，placeholder文字沒有變化，隻有當輸入框中輸入了內容時，placeholder文字才消失；而在safari和ie10下，當輸入框獲得焦點時，placeholder文字便立即消失。
默認情況下，placeholder的文字是灰色，輸入的文字是黑色。而我們拿到的設計稿上的色值往往並不與默認情況下完全一致。那麼，如何修改placeholder的色值呢？
如果直接寫input{color:red;}，可以看到，ie10和ff下，placeholder文字和輸入文字都變成了紅色，如下：
ff：
placeholder在不同瀏覽器下的表現及兼容方法
ie10：
placeholder在不同瀏覽器下的表現及兼容方法
而在chrome和safari下，placeholder文字顏色不變，隻有輸入的文字變成紅色。
顯然，這種做法是行不通的。因為我們隻想改變placeholder文字的顏色，並不想改變輸入文字的顏色。
正確的寫法如下：
::-moz-placeholder{color:red;} //ff
::-webkit-input-placeholder{color:red;} //chrome,safari
:-ms-input-placeholder{color:red;} //ie10
3、如何使placeholder兼容所有瀏覽器
前麵我們知道了，ie6到ie9並不支持原生的placeholder，並且即使在支持原生placeholder的瀏覽器上，其表現也並不一致。在實際項目中，如何使所有瀏覽器都一致地支持placeholder呢？
（1）如果隻需要讓不支持placeholder的瀏覽器能夠支持改功能，並不要求支持原生placeholder的瀏覽器表現一致，那麼可以采用如下方法：
function placeholder(nodes,pcolor) {
if(nodes.length && !(“placeholder” in document_createElement_x_x_x(“input”))){
for(i=0;i
var self = nodes[i],
placeholder = self.getAttribute(‘placeholder’) || ”;
self.onfocus = function(){
if(self.value == placeholder){
self.value = ”;
self.style.color = “”;
}
}
self.onblur = function(){
if(self.value == ”){
self.value = placeholder;
self.style.color = pcolor;
}
}
self.value = placeholder;
self.style.color = pcolor;
}
}
}
（2）如果需要自定義樣式，並且希望placeholder在所有瀏覽器下表現一致，可以通過利用label標簽模擬一個placeholder的樣式放到輸入框上，當輸入框獲得焦點的時候，隱藏label，當輸入框失去焦點的時候，顯示label。
或者是在input上應用背景圖片，獲得和失去焦點的時候切換背景圖片是否顯示。
實現方法有很多種，歡迎大家各抒已見。
最後更新：2017-04-03 12:56:16