技術標籤：前端javascriptjqueryie

文章目錄

• 前言
• 一、參考方案
• 二、初步方案
• 三、最終方案
• 總結

前言

產品要適配ie8，ie8不支援placeholder，但是程式碼中很多表單都有placeholder，不能挨個處理。因此想了一個全域性處理的方式。在ie8下使用jquery實現placeholder的效果。並支援密碼框的展示和密碼明文隱藏功能。

一、參考方案

參考了該博主的文章，已經可以實現placeholder的效果，但是密碼框在頁面剛渲染好時，顯示的提示文字是黑點，針對這個問題進行了優化。

二、初步方案

開始想著在密碼框獲得焦點時，修改input的框的type屬性，但type屬性不能被修改。

三、最終方案

最終方案是在頁面渲染展示時使用text框，在輸入密碼時替換為password。程式碼如下：

//適配ie8 不支援placeholder
$(function(){
    function placeholderSupport() {    // 判斷瀏覽器是否支援  placeholder
        return 'placeholder' in document.createElement('input');
    }
    
    if(!placeholderSupport()){
        $(document).on('focus', '[placeholder]'
 
,function() {
            var input = $(this);
            if (input.val() == input.attr('placeholder')) {
                input.val('');
                input.removeClass('placeholder');
                
                if(input.hasClass('placeholderPassword')){//輸入密碼時替換成password型別,避免密碼明文輸入
                  input.
 
hide();//隱藏文字框
                  input.prev().show().val('').focus();//顯示前一個密碼框
                }
            }
        });
        $(document).on('blur', '[placeholder]',function() {
            var input = $(this);
            var placeholderVal=input.attr('placeholder');
            if (input.val() == '' || input.val() ==  input.attr('placeholder')) {
                input.addClass('placeholder');
                if(input.attr('type')=='password'){//密碼框進行處理,避免文字顯示為點
                //我們專案中使用的layui,可根據自身專案情況,更換該顯示的input框,但需保留標記class屬性placeholderPassword
                  var formHtml="<input type=\"text\"  value=\""+placeholderVal+"\" placeholder=\""+placeholderVal+
                      "\" autocomplete=\"off\"  class=\"layui-input placeholderPassword\">";
                  
//                     input.replaceWith(formHtml);//ie8不支援此方法
                  input.hide().after(formHtml);//隱藏密碼輸入框並在密碼框後面增加文字框避免文字被替換成點
                }
                input.val(placeholderVal);
            }
        });
        $('[placeholder]').blur();
    };
});

效果如下:

總結

該方案不一定完美，也還有缺陷。比如使用滑鼠點選密碼框兩次才能輸入。但使用tab鍵就可以直接輸入。
以上以供參考。