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