解決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();
            }
        })
    });
    }
});        

 

有問題但願能夠多多交流，互相學習！