解决placeholder兼容性问题

placeholder属性是HTML5 中为input添加的。在input上提供一个占位符，文字形式展示输入字段预期值的提示信息（hint），该字段会在输入为空时显示。

实例:
1 <input type="text" name="userName" placeholder="请输入用户名">

placeholder操作起来非常方便，提高了开发效率，同时在高版本浏览器中用户体验也很好，所以本人很喜欢用这个属性。

然而，在IE9以下版本浏览器就失效了，并且IE10+支持placeholder属性，它的表现与其它浏览器也不一致

• IE10+里鼠标点击时（获取焦点）placeholder文本消失
• Firefox/Chrome/Safari点击不消失，而是键盘输入时文本消失

因此想到用span标签浮动在input控件上，当input控件失去焦点时显示span，获取焦点是隐藏span，来模拟placeholder的效果，具体代码如下:

              <form action="">                <span class="placeholder1">手机号码</span>                <input class="user_phone" type="text" onfocus="$('.placeholder1').hide()" onblur="if($(this).val()!=''){$('.placeholder1').hide()}else{$('.placeholder1').show()}" />                 <span class="placeholder2">密码</span>                <input class="user_password" type="password" onfocus="$('.placeholder2').hide()" onblur="if($(this).val()!=''){$('.placeholder2').hide()}else{$('.placeholder2').show()}"/>              </form>

仅仅这样写会出现一个问题，就是当用户想要去input控件里输入内容的时候，会点到浮动着的span标签，导致input控件无法获取焦点，有一个办法，当点击到span的时候使得input控件获取焦点，因此有以下的解决方式：

    $(".placeholder1").on("click",function(){        $(".user_phone").focus();    });    $(".placeholder2").on("click",function(){        $(".user_password").focus();    });

最终效果：