HTML5中Placeholder解决新标签低版本浏览器下不兼容的示例分析

HTML5中Placeholder解决新标签低版本浏览器下不兼容的示例分析，针对这个问题，这篇文章详细介绍了相对应的分析和解答，希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。

placeholder 属性是 HTML5 中的新属性，俗名叫“占位符”，功能类似于输入框在得到焦点时，时面的默认值会变成空白，当失去焦点时又会显示默认的文本，我想大家一定使用 js/jquery制作过这样的效果。目前只有在Mozilla Firefox 3.7+、Apple Safari 4+、Google Chrome 4+、Opera11+等现代浏览器支持。”
placeholder属性是HTML5 中为input添加的。在input上提供一个占位符，文字形式展示输入字段预期值的提示信息（hint），该字段会在输入为空时显示。
实例:

代码如下:

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

placeholder操作起来非常方便，提高了开发效率，同时在高版本浏览器中用户体验也很好，所以本人很喜欢用这个属性。
然而，在IE9以下版本浏览器就失效了，并且IE10+支持placeholder属性，它的表现与其它浏览器也不一致
&bull;IE10+里鼠标点击时（获取焦点）placeholder文本消失
&bull;Firefox/Chrome/Safari点击不消失，而是键盘输入时文本消失
那么作为一名开发人员，是否应该去克服解决这个问题呢。目前网上也一堆类似解决方案，大致实现思路分为两种：
1.(方式一)使用input的value作为显示文本，模拟灰色样式，focus让$("[placeholder]").val()=="",blur时$("[placeholder]").val(this.defaultValue)；
2.(方式二)不使用value，添加一个额外的标签（span）到body里然后绝对定位覆盖到input上面。
在这里因第一种方式实现起来，占用了value且验证时需要做额外的判断，那么个人建议使用第二种方式。
首先，判断当前浏览器是否支持placeholder属性：

代码如下:

function placeholderSupport() { 
return 'placeholder' in document.createElement('input'); 
}

上关键代码：

代码如下:

/* 
*placeholder兼容ie9以下 author：高丰鸣 add 2016-1-27 
*/ 
$(function(){ 
if(!placeholderSupport()){ // 判断浏览器是否支持 placeholder 
$(document).ready(function(){ 
//默认遍历循环添加placeholder 
$('[placeholder]').each(function(){ 
$(this).parent().append("<span class='placeholder'>"+$(this).attr('placeholder')+"</span>"); 
}) 
$('[placeholder]').blur(function(){ 
if($(this).val()!=""){ //如果当前值不为空，隐藏placeholder 
$(this).parent().find('span.placeholder').hide(); 
} 
else{ 
$(this).parent().find('span.placeholder').show(); 
} 
}) 
}); 
} 
});

关于HTML5中Placeholder解决新标签低版本浏览器下不兼容的示例分析问题的解答就分享到这里了，希望以上内容可以对大家有一定的帮助，如果你还有很多疑惑没有解开，可以关注亿速云行业资讯频道了解更多相关知识。