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上应用背景图片，得到和失去焦点的时候切换背景图片是否显示。

   实现方法有不少种，欢迎你们各抒已见。