解决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" οnfοcus="$('.placeholder1').hide()" οnblur="if($(this).val()!=''){$('.placeholder1').hide()}else{$('.placeholder1').show()}" /> <span class="placeholder2">密码</span><input class="user_password" type="password" οnfοcus="$('.placeholder2').hide()" οnblur="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();});
最终效果：

总结

以上是生活随笔为你收集整理的解决placeholder兼容性问题的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。