placeholder 屬性的兼容性

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

可是在不支持html5的低版本的瀏覽器中，placeholder屬性是無效的，例如ie9及如下的ie瀏覽器不兼容這個屬性。下面介紹placeholder兼容性的處理

在頁面添加以下腳本

 

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

參考資料：  placeholder兼容性   http://www.studyofnet.com/news/1022.html