placeholder在不同浏览器下的表现及兼容方法

1、什么是placeholder？

　　placeholder是html5新增的一个属性，当input或者textarea设置了该属性后，该值的内容将作为灰字提示显示在文本框中，当文本框获得焦点（或输入内容）时，提示文字消失。

2、placeholder的浏览器兼容性和在不同浏览器下的表现

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

　　如果直接写input{color:red;}，可以看到，ie10和ff下，placeholder文字和输入文字都变成了红色，

　　而在chrome和safari下，placeholder文字颜色不变，只有输入的文字变成红色。

       显然，这种做法是行不通的。因为我们只想改变placeholder文字的颜色，并不想改变输入文字的颜色。

　　正确的写法如下：

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

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

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

 

　　$(function() {
  　　// 如果不支持placeholder，用jQuery来完成
  　　if(!isSupportPlaceholder()) {
   　  // 遍历所有input对象, 除了密码框
    　 $('input').not("input[type='password']").each(
      　　function() {
        　　var self = $(this);
        　　var val = self.attr("placeholder");
        　　input(self, val);
      　　}
    　  );
    
   　　 /**//* 对password框的特殊处理
     　　* 1.创建一个text框
     　　* 2.获取焦点和失去焦点的时候切换
    　　 */
    　　$('input[type="password"]').each(
     　　 function() {
        　　var pwdField    = $(this);  
        　　var pwdVal      = pwdField.attr('placeholder');  
        　　var pwdId       = pwdField.attr('id');  
        　　// 重命名该input的id为原id后跟1
        　　pwdField.after('<input id="' + pwdId +'1" type="text" value='+pwdVal+' autocomplete="off" />');  
        　　var pwdPlaceholder = $('#' + pwdId + '1');  
        　　pwdPlaceholder.show();  
        　　pwdField.hide();  
          
        　　pwdPlaceholder.focus(function(){  
          　　pwdPlaceholder.hide();  
          　　pwdField.show();  
          　　pwdField.focus();  
        　　});  
          
        　　pwdField.blur(function(){  
          　　if(pwdField.val() == '') {  
            　　pwdPlaceholder.show();  
            　　pwdField.hide();  
          　　}  
        　　});  
      　　}
    　　);
  　　}
　　});

// 判断浏览器是否支持placeholder属性
function isSupportPlaceholder() {
  var input = document.createElement('input');
  return 'placeholder' in input;
}

// jQuery替换placeholder的处理
function input(obj, val) {
  var $input = obj;
  var val = val;
  $input.attr({value:val});
  $input.focus(function() {
    if ($input.val() == val) {
      $(this).attr({value:""});
    }
  }).blur(function() {
    if ($input.val() == "") {
            $(this).attr({value:val});
    }
  });
}