關於HTML5 Placeholder新標籤低版瀏覽器下不相容的問題分析及解決方案 _html5教學技巧

placeholder 屬性是HTML5 中的新屬性，俗名叫“佔位符”，功能類似於輸入框在得到焦點時，時面的預設值會變成空白，當失去焦點時又會顯示預設的文本，我想大家一定有使用js/jquery製作過這樣的效果。目前只有在Mozilla Firefox 3.7 、Apple Safari 4 、Google Chrome 4 、Opera11 等現代瀏覽器支援。 」
placeholder屬性是HTML5 中為input新增的。在input上提供一個佔位符，文字形式展示輸入欄位預期值的提示訊息（hint），該欄位會在輸入為空時顯示。
實例:

複製程式碼

程式碼如下:

程式碼如下:

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("" $(this).attr('placeholder') ""); }) $('[placeholder]' ).blur(function(){ if($(this).val()!=""){ //如果目前值不為空，隱藏placeholder $(this).parent(). find('span.placeholder').hide(); } else{ $(this).parent().find('span.placeholder').show(); } }) }); } }); 以上內容為大家介紹了關於HTML5 Placeholder新標籤低版瀏覽器下不相容的問題分析及解決方法 的相關內容，希望對大家有所幫助。