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});
    }
  });
}