關于HTML5 Placeholder新標簽低版本瀏覽器下不兼容的問題分析及解決辦法

2020-03-24 17:50:44

字體：大中小

來源：轉載

供稿：網友

HTML 關于HTML5 Placeholder新標簽低版本瀏覽器下不兼容的問題分析及解決辦法
placeholder 屬性是 HTML5 中的新屬性，俗名叫占位符，功能類似于輸入框在得到焦點時，時面的默認值會變成空白，當失去焦點時又會顯示默認的文本，我想大家一定使用 js/html' target='_blank'>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屬性，它的表現與其它瀏覽器也不一致
IE10+里鼠標點擊時（獲取焦點）placeholder文本消失
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 "+$(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新標簽低版本瀏覽器下不兼容的問題分析及解決辦法的相關內容，希望對大家有所幫助。html教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。

上一篇：HTML元素(標簽)大全及使用介紹

下一篇：HTML5有哪些新特征