優雅降級之"placeholder"

在開始寫這篇文章以前,發至心裏的噴下沒有支持"placeholder"這個屬性的瀏覽器,也是它們造就了這篇文章.至因而哪些瀏覽器,你們都心知肚明瞭.

<input type="text" id="name" placeholder="用戶名">

當遇到不太可愛的瀏覽器時,在input框裏,並不會有"用戶名"這3個字出現.爲了讓全部用戶都能體驗到同樣的前端頁面(固然只是最大化的讓頁面一致),咱們不得不用js來本身寫個"placeholder"功能.思路以下:

1:判斷該用戶的瀏覽器是否支持placeholder這個屬性,若是支持,直接return;

2:用getAttribute("placeholder")獲取值以後,賦值給input.value;

3:用onfocus事件判斷input.value是否爲placeholder的值,若是是,就把input.value="";(爲了讓用戶點擊後,能夠直接輸入,不用刪除掉佔位字符)

4:用onblur事件判斷input.value是否爲空,若是是就把placeholder賦值給input.vlaue;(當用戶沒有輸入時,離開input填入佔位字符)

============================高潮來了==============================

原本覺得這樣寫就能夠了.可是沒想到被type=password反殺了....

佔位字符在type=password下.所有都是顯示*****,這可不行.個人第一反應就是用setAttribute來改變type,但是呀但是.萬萬沒想到,某個萬惡的瀏覽器,它input的type屬性是隻讀的,不能改變(不但不支持placeholder,type仍是隻讀,我只能說你厲害).

以後網上找了下,基本上都是建立一個新的input來替代password的,那我也只能這樣誠服了,最後寫成這樣的函數,思路也就多一個參數,用來判斷nput的type爲password時,傳入true,反則不用第二個參數;

//優雅降級placeholder
function placeHolder(elemId, bool) {
    var d = document.getElementById(elemId),
        text = d.getAttribute("placeholder"),
        newpw,
        ispw = bool || false;
    if ('placeholder' in document.createElement('input')) {
        return;
    }
    if (ispw) {
        d.style.display = "none";
        newpw = document.createElement("input");
        newpw.setAttribute("type", "text");
        newpw.value = text;
        insertAfter(newpw, d);
        newpw.onfocus = function () {
            newpw.style.display = "none";
            d.style.display = "inline-block";
            d.focus();
        };
        d.onblur = function () {
            if (d.value == "") {
                newpw.style.display = "inline-block";
                d.style.display = "none";
            }
        };
    } else {
        d.value = text;
        d.onfocus = function () {
            if (d.value == text) {
                d.value = "";
            }

        };
        d.onblur = function () {
            if (d.value == "") {
                d.value = text;
            }
        };
    }
}

placeHolder("password", true);  //input.type 爲password時
placeHolder("name");            //input.type 爲其餘值時