input 的 placeholder属性在IE8下的兼容处理

placeholder是input标签的新属性，在使用的时候有两个问题：

1、IE8 下不兼容

处理思路：

如果浏览器不识别placeholder属性，给input添加类名placeholder，模仿placeholder属性的样式，并给input 的value赋值placeholder属性的值

2、 input的type属性是password的情况，用上面的方法处理提示语为密码文

处理思路：

新添加一个标签，模仿placeholder属性

直接上代码：

 css部分：

 .input-item {
      position: relative;
      margin: 10px;
    }
.pwd-place {
  position: absolute;
  top: 0;
  left: 72px;
  width: 100%;
  height: 100%;
  font-size: 12px;
}

html部分：

 <form action="#">
  <div class="input-item">
    <label for="userName">用户名：</label>
    <input class="username" id="userName" type="text" placeholder="请输入用户名">
  </div>
   <div class="input-item">
    <label for="pwd">密码：</label>
    <input class=" password" id="pwd" type="password" placeholder="请输入密码">
    <span class="pwd-place"></span>
  </div>

  </form>

js部分：

<script src="jquery-1.11.3.js"></script>
  <script>
      function placeholder(el){

         function isPlaceholer(){
          var input = document.createElement("input");
          return "placeholder" in input;
         }

        var $el = $(el);
        if( isPlaceholer()==false && !('placeholder' in document.createElement('input')) ){

              $('input[placeholder],textarea[placeholder]').each(function(){
                  var that = $(this),
                          text= that.attr('placeholder');
                  if(that.val()===""){
                      if(that.attr("type") == "password"){
                          $el.html("请输入密码");
                      }else {
                          that.val(text).addClass('placeholder');
                      }
                  }
                  that.focus(function(){
                      if($el.html() == text){
                          $el.html("");
                      }
                      if(that.val()===text) {
                          that.val("").removeClass('placeholder');

                      }
                  })
                  .blur(function(){
                      if(that.val()==="") {
                          if (that.attr("type") == "password") {
                              $el.html("请输入密码");

                          }else {
                              that.val(text).addClass('placeholder');
                          }
                      }
                  })
                  .closest('form').submit(function(){
                      if(that.val() === text){
                          that.val('');
                      }
                  });
              });
           }
      }
 $(document).ready(function() {
     placeholder(".pwd-place")
      });
  </script>