placeholder 兼容IE

placeholder 是html5的新属性，所有只有支持html5的浏览器才能解析placeholder属性，下面介绍一种placeholder兼容IE浏览器的方法，

JS：jquery.JPlaceholder

var JPlaceHolder = {
  //检测
  _check: function () {
    return 'placeholder' in document.createElement('input');
  },
  //初始化
  init: function () {
    if (!this._check()) {
      this.fix();
    }
  },
  //修复
  fix: function () {
    jQuery(':input[placeholder]').each(function (index, element) {
      var self = $(this), txt = self.attr('placeholder');
      self.wrap($('<div></div>').css({ position: 'relative', zoom: '1', border: 'none', background: 'none', padding: 'none', margin: 'none' }));
      var pos = self.position(), h = self.outerHeight(true), paddingleft = self.css('padding-left');
      var holder = $('<span></span>').text(txt).css({ position: 'absolute', left: pos.left, top: pos.top, height: h, lienHeight: h, paddingLeft: paddingleft, color: '#aaa' }).appendTo(self.parent());
      self.focusin(function (e) {
        holder.hide();
      }).focusout(function (e) {
        if (!self.val()) {
          holder.show();
        }
      });
      holder.click(function (e) {
        holder.hide();
        self.focus();
      });
    });
  }
};
//执行
jQuery(function () {
  JPlaceHolder.init();
});

页面调用：

<script src="~/JsScript/Web/Common/jquery.JPlaceholder.js"></script>

<input id="username" name="username" placeholder="Please The Name " type="text" />