placeholder在不一樣瀏覽器下的表現及兼容方法

一、什麼是placeholder？

  placeholder是html5新增的一個屬性，當input或者textarea設置了該屬性後，該值的內容將做爲灰字提示顯示在文本框中，當文本框得到焦點（或輸入內容）時，提示文字消失。

  寫法以下：

  

 

二、placeholder的瀏覽器兼容性和在不一樣瀏覽器下的表現

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

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

   firefox：

   

   chrome：

   

   safari：

   

   ie10：

   

 

  能夠看出，placeholder的文字在各個瀏覽器下基本都是淡灰色顯示。

   不一樣的地方在於，在ff和chrome下，輸入框得到焦點時，placeholder文字沒有變化，只有當輸入框中輸入了內容時，placeholder文字才消失；而在safari和ie10下，當輸入框得到焦點時，placeholder文字便當即消失。

   默認狀況下，placeholder的文字是灰色，輸入的文字是黑色。而咱們拿到的設計稿上的色值每每並不與默認狀況下徹底一致。那麼，如何修改placeholder的色值呢？

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

   ff：

   

   ie10：

    

    而在chrome和safari下，placeholder文字顏色不變，只有輸入的文字變成紅色。

    顯然，這種作法是行不通的。由於咱們只想改變placeholder文字的顏色，並不想改變輸入文字的顏色。

正確的寫法以下：

  ::-moz-placeholder{color:red;}        //ff

  ::-webkit-input-placeholder{color:red;}   //chrome,safari

  :-ms-input-placeholder{color:red;}      //ie10

   

三、如何使placeholder兼容全部瀏覽器

   前面咱們知道了，ie6到ie9並不支持原生的placeholder，而且即便在支持原生placeholder的瀏覽器上，其表現也並不一致。在實際項目中，如何使全部瀏覽器都一致地支持placeholder呢？

  （1）若是隻須要讓不支持placeholder的瀏覽器可以支持改功能，並不要求支持原生placeholder的瀏覽器表現一致，那麼能夠採用以下方法：

  function placeholder(nodes,pcolor) {

   if(nodes.length && !("placeholder" in document_createElement_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上應用背景圖片，得到和失去焦點的時候切換背景圖片是否顯示。

   實現方法有不少種，歡迎你們各抒已見。