关于IE9的placeholder属性异常万能解决方案

此方案更适用于工作中遇到很乱套的工程，不方便套用网上的脚本。

解决思路：

1.打漂浮于input输入框上的悬浮层<div>

 <input id="l_phone"  οnblur="showSuspendPhone()" type=“text"  οninput="hideSuspendPhone()" />

 <div class="placeholderSuspendPhone">请输入手机号</div>

  2. 与<input>标签相对定位  悬浮  

.placeholderSuspendPhone {

      position: relative;

      z-index: 3;

      left: 10px;

     top: -50%;

     margin-top:-6px;

     color: #ABABAB;

}

#l_phone{

    position: relative;

    z-index: 2;

}

  3.情况：页面加载移除placeholder的属性，使其不影响悬浮层，有记忆内容时，悬浮层不显示

$("#l_phone"). removeAttr("placeholder");

     if ($( "#l_phone").val() == "")

     {

         $(".placeholderSuspendPhone").show();

     }else

     {

         $(".placeholderSuspendPhone").hide();

      }

4.对文本框实行实时监控事件函数οninput="hideSuspendPhone()”

 function hideSuspendPhone(){

      $(".placeholderSuspendPhone").hide();

}

5.文本框失焦事件，失焦且无值，οnblur="showSuspendPhone()"

function showSuspendPhone(){

      if ($("#l_phone").val() == "")

{

     $(".placeholderSuspendPhone").show();

     }

}

6.解决因悬浮层造成的遮掩，聚焦体验不好问题

 $(".placeholderSuspendPhone").on("click",function(){

          $("#l_phone").focus();

  });

7.解决悬浮层造成对非IE9浏览器的placeholder属性的干扰

 <script type="text/javascript">

      $(document).ready(

               function() {

                    $(".placeholderSuspendPhone").hide();

                     document.getElementById("l_phone").setAttribute("placeholder","请输入手机号");

                });

</script>

10.IE9浏览器引入js文件

<!--[if IE 9]>

          <script type="text/javascript" src="<%=request.getContextPath()%>/jsh/loginCompateIE9_placeholder.js"></script>

<![endif]-->