placeholder兼容ie8

placeholder在低版本浏览器下兼容效果不是很好，在网上找了一些文章，很多的实现是将input里面的值赋值成placeholder，这样会有一个问题，input没有值的情况，获取form表单input的值不是为空而是placeholder的值，这个也不是想要的结果，所以自己简单的封装了一个方法来实现placeholder的效果。

html部分

  <div class="login_box ">
     <div class="login_left ">
         <div class="left_text">
              <input type="password" id="ps" jr_placeholder="密码">
          </div>
          <div class="left_text">
             <input class="y_box" type="text" id="yzm" jr_placeholder="验证码">
              <div class="yzm_box"></div>
          </div>
          <div class="denglu">登录</div>
       </div>
   </div>

input元素上需要加上jr_placeholder(placeholder的值)和id属性

css部分

父元素加上相对定位
.left_text{
    position:relative;
}
.holders{
  position: absolute;
  left: 5px;
  top: 6px;
  font-size: 13px;
}

js部分

$(function () {
    function showPlaceholder() {
        var targetObj = $('input[jr_placeholder]');
        targetObj.each(function (k, v) {
            var _id = $(v).attr('id');
            var _placeholder = $(v).attr('jr_placeholder');
            $(v).before('<label for="' + _id + '" class="holders">' + _placeholder + '</label>');
            $(v).val() && $('label[for=' + _id + ']').hide();
        })
        $(document).on('focus', 'input[jr_placeholder]', function () {
            var _id = $(this).attr('id');
            $('label[for=' + _id + ']').hide();
        })
        $(document).on('blur', 'input[jr_placeholder]', function () {
            var _id = $(this).attr('id');
            !$(this).val() && $('label[for=' + _id + ']').show();
        })
    }
    $.extend({
        showPlaceholder:showPlaceholder
    })
});

直接调用$.showPlaceholder()初始化下函数即可。