placeholder在不同浏覽器下的表現及相容方法

1、什麼是placeholder？

placeholder是html5新增的一個屬性，當input或者textarea設定了該屬性後，該值的内容将作為灰字提示顯示在文本框中，當文本框獲得焦點（或輸入内容）時，提示文字消失。

寫法如下：

2、placeholder的浏覽器相容性和在不同浏覽器下的表現

由于placeholder是html5的新屬性，可想而知，僅支援html5的浏覽器才支援placeholder，目前最新的firefox、chrome、safari以及ie10都支援，ie6到ie9都不支援。

下面是其在各個浏覽器下的顯示效果：

firefox：

placeholder在不同浏覽器下的表現及相容方法

chrome：

safari：

ie10：

可以看出，placeholder的文字在各個浏覽器下基本都是淡灰色顯示。

不同的地方在于，在ff和chrome下，輸入框獲得焦點時，placeholder文字沒有變化，隻有當輸入框中輸入了内容時，placeholder文字才消失；而在safari和ie10下，當輸入框獲得焦點時，placeholder文字便立即消失。

預設情況下，placeholder的文字是灰色，輸入的文字是黑色。而我們拿到的設計稿上的色值往往并不與預設情況下完全一緻。那麼，如何修改placeholder的色值呢？

如果直接寫input{color:red;}，可以看到，ie10和ff下，placeholder文字和輸入文字都變成了紅色，如下：

ff：

而在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;

（2）如果需要自定義樣式，并且希望placeholder在所有浏覽器下表現一緻，可以通過利用label标簽模拟一個placeholder的樣式放到輸入框上，當輸入框獲得焦點的時候，隐藏label，當輸入框失去焦點的時候，顯示label。

或者是在input上應用背景圖檔，獲得和失去焦點的時候切換背景圖檔是否顯示。

實作方法有很多種，歡迎大家各抒已見。