解决html5新标签【placeholder】低版本浏览器下不兼容问题

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

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

placeholder操做起来很是方便，提升了开发效率，同时在高版本浏览器中用户体验也很好，因此本人很喜欢用这个属性。

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

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

那么做为一名开发人员，是否应该去克服解决这个问题呢。目前网上也一堆相似解决方案，大体实现思路分为两种：

1. (方式一)使用input的value做为显示文本，模拟灰色样式，focus让$("[placeholder]").val()=="",blur时$("[placeholder]").val(this.defaultValue)；
2. (方式二)不使用value，添加一个额外的标签（span）到body里而后绝对定位覆盖到input上面。

在这里因第一种方式实现起来，占用了value且验证时须要作额外的判断，那么我的建议使用第二种方式。

首先，判断当前浏览器是否支持placeholder属性：

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

上关键代码：

/*
*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();
            }
        })
    });
    }
});        

 

有问题但愿能够多多交流，互相学习！