placeholder 屬性是 HTML5 中的新屬性，俗名叫“占位符”，功能類似于輸入框在得到焦點(diǎn)時(shí)，時(shí)面的默認(rèn)值會(huì)變成空白，當(dāng)失去焦點(diǎn)時(shí)又會(huì)顯示默認(rèn)的文本，我想大家一定使用 js/jquery制作過(guò)這樣的效果。目前只有在Mozilla Firefox 3.7+、Apple Safari 4+、Google Chrome 4+、Opera11+等現(xiàn)代瀏覽器支持。”
placeholder屬性是HTML5 中為input添加的。在input上提供一個(gè)占位符，文字形式展示輸入字段預(yù)期值的提示信息（hint），該字段會(huì)在輸入為空時(shí)顯示。
實(shí)例:
<input type="text" name="userName" placeholder="請(qǐng)輸入用戶名">
placeholder操作起來(lái)非常方便，提高了開(kāi)發(fā)效率，同時(shí)在高版本瀏覽器中用戶體驗(yàn)也很好，所以本人很喜歡用這個(gè)屬性。
然而，在IE9以下版本瀏覽器就失效了，并且IE10+支持placeholder屬性，它的表現(xiàn)與其它瀏覽器也不一致
•IE10+里鼠標(biāo)點(diǎn)擊時(shí)（獲取焦點(diǎn)）placeholder文本消失
•Firefox/Chrome/Safari點(diǎn)擊不消失，而是鍵盤(pán)輸入時(shí)文本消失
那么作為一名開(kāi)發(fā)人員，是否應(yīng)該去克服解決這個(gè)問(wèn)題呢。目前網(wǎng)上也一堆類似解決方案，大致實(shí)現(xiàn)思路分為兩種：
1.(方式一)使用input的value作為顯示文本，模擬灰色樣式，focus讓$("[placeholder]").val()=="",blur時(shí)$("[placeholder]").val(this.defaultValue)；
2.(方式二)不使用value，添加一個(gè)額外的標(biāo)簽（span）到body里然后絕對(duì)定位覆蓋到input上面。
在這里因第一種方式實(shí)現(xiàn)起來(lái)，占用了value且驗(yàn)證時(shí)需要做額外的判斷，那么個(gè)人建議使用第二種方式。
首先，判斷當(dāng)前瀏覽器是否支持placeholder屬性：
function placeholderSupport() {
return 'placeholder' in document.createElement('input');
}
上關(guān)鍵代碼：
/*
*placeholder兼容ie9以下 author：高豐鳴 add 2016-1-27
*/
$(function(){
if(!placeholderSupport()){ // 判斷瀏覽器是否支持 placeholder
$(document).ready(function(){
//默認(rèn)遍歷循環(huán)添加placeholder
$('[placeholder]').each(function(){
$(this).parent().append("<span class='placeholder'>"+$(this).attr('placeholder')+"</span>");
})
$('[placeholder]').blur(function(){
if($(this).val()!=""){ //如果當(dāng)前值不為空，隱藏placeholder
$(this).parent().find('span.placeholder').hide();
}
else{
$(this).parent().find('span.placeholder').show();
}
})
});
}
});
以上內(nèi)容給大家介紹了關(guān)于HTML5 Placeholder新標(biāo)簽低版本瀏覽器下不兼容的問(wèn)題分析及解決辦法 的相關(guān)內(nèi)容，希望對(duì)大家有所幫助。
