這是一個老問題，結合前輩們的經驗，需要處理的問題有一下幾個。

　　1.只有輸入框（input/textarea）下的palaceholder屬性存在的時候才需要處理這類兼容

　　2.處理好輸入框上焦點和是焦點的文本顯示

　　3.密碼輸入框比較特殊，因為為其設置顯示文本時顯示的是一串“***”。這個問題后面分析。處理好前兩點還是比較簡單的，處理源碼為如下

var browserSupport = {placeholder: 'placeholder' in document.createElement('input') }$(function() {//模擬placeholderif( !browserSupport.placeholder){$('input[placeholder],textarea[placeholder]').each(function(){var that = $(this),text= that.attr('placeholder'),oldType; if(that.val()===""){that.val(text).addClass('placeholder'); } that.focus(function(){//ie8下readonly依然可以上焦點的處理if(that.attr('readonly')){that.blur();return;}that.removeClass('placeholder');if(that.val()===text){ that.val(""); } }).blur(function(){if(that.val()===""){ that.val(text).addClass('placeholder');//防止異常情況：當有placeholder類，且值不為空（代碼設置值時容易出現）}else{that.removeClass('placeholder');} }).closest('form').submit(function(){ if(that.val() === text){ that.val(''); } }); });} });

　　可以看出處理還是比較簡單的。在不支持placeholder的瀏覽器下沒有上焦點的為placeholder的空白輸入框添加class placeholder并設置其內容為placeholder值。上焦點的placeholder的輸入框判斷其值是否是手動設置的placeholder值，如果是則重置輸入框為空白。當然免不了提交表單的時候要清除兼容placeholder的影響。

　　這里面有一個細節事件是綁定在標簽對應的緩存中，而不是委托document等祖先節點，為什么？有兩個考慮：1.避免有設置事件禁止冒泡導致綁定到document上的事件沒法處理。2.事件執行的先后順序是先執行綁定到自身節點的事件，然后在冒泡到document節點執行事件源委托到document的事件。

　　

　　至于第3點密碼輸入框的問題。我們首先考慮是當密碼輸入框失焦的時候先更改輸入框的type為text類型然后按照正常的設置其值為placeholder值；聚焦的時候將type值設置回來并恢復其值。但是這個存在問題是IE8不允許更改type類型。沒招了，只能額外的添加一個元素來展示密碼輸入框的placeholder值。結果完整的源碼就變成了如下

/* .placeholder{ color: #aaa!important; } span.placeholder{position: absolute;left: 0;line-height: 34px;padding-left: 12px; } */ var browserSupport = {placeholder: 'placeholder' in document.createElement('input') }/* ajax請求發現未登錄時，服務端返回401錯誤，然后此處統一處理401錯誤，跳轉到登錄頁面 */ $(document).ready(function() {//模擬placeholderif( !browserSupport.placeholder){$('input[placeholder],textarea[placeholder]').each(function(){var that = $(this),text= that.attr('placeholder'),oldType; if(that.val()===""){if(that.attr('type') != 'password'){that.val(text).addClass('placeholder'); }else{that.before('<span class="placeholder">請輸入密碼</span>');}} that.focus(function(){//ie8下readonly依然可以上焦點的處理if(that.attr('readonly')){that.blur();return;}//清除span.placeholderthat.prev("span.placeholder").remove();that.removeClass('placeholder');if(that.val()===text){ that.val(""); } }).blur(function(){if(that.val()===""){if(that.attr('type') != 'password'){ that.val(text).addClass('placeholder');}else{that.before('<span class="placeholder">請輸入密碼</span>');}//防止異常情況：當有placeholder類，且值不為空（代碼設置值時容易出現）}else{that.removeClass('placeholder');} }).closest('form').submit(function(){ if(that.val() === text){ that.val(''); } }); }); $(document).on('click','span.placeholder',function(){$(this).next("[placeholder]").focus();//刪除span.placeholder會在[placeholder]的focus中進行 })} })

　　我自己專門添加了一個span.placeholder來顯示密碼輸入框的占位符顯示。然后添加了一個監聽器監聽span.placeholder被點擊。

　　功能是完成了，在測試的時候還是會遇到一個問題，瀏覽器有自動填寫表單的時候初始化可能會出現異常，現在為止還沒有什么好的方法捕獲自動填寫表單事件，結果可能導致密碼輸入框的placeholder顯示和內容一起顯示。所以如果要使用這種密碼輸入框的placeholder兼容方式，最好讓瀏覽器不自動填充，也有利于信息保密：給密碼input設置autocomplete=off即可。

　　需要注意的是autocomplete=off在chrome下也有兼容問題，不過這里是專門給IE下用的到沒有什么問題，只不過chrome下是沒有保密而已。更多的信息自行百度。

?

　　如果覺得本文不錯，請點擊右下方【推薦】！

總結

以上是生活随笔為你收集整理的placeholder的兼容处理(jQuery下)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。