分享input佔位符的幾種實現方式

在WEB表單中，爲了達到更好的用戶體驗，往往會在input輸入框中添加文字或圖形佔位符。
以往佔位符的實現方式都是通過javascript來判斷value值的更改，現在html5提供了placeholder屬性就可以在標準瀏覽器中輕鬆實現。
下面分別介紹本人常用的3種實現方法：

一、完全依靠javascript

就是通過onfocus,onblur的方式，動態改變其value值，但此種方式有幾個缺點：
1.對於密碼框，文字佔位符無法實現（方式二可避免）
2.表單提交時，還需要對默認值進行單獨處理，比較繁瑣（方式二、三均可避免）
3.如果文本框中填入非佔位符值的默認文本，需特殊處理，如搜索頁面文本框中會填入當前的搜索關鍵字，這個值是不能被當做佔位符處理的

function inputFocus(obj){
    var b = obj.val();
    obj.focus(function(){
        if ($(this).val() == b) {
            $(this).val('');
        }
    }).blur(function(){
        if($(this).val().replace(/\s/g,"")==''||$(this).val()==b) {
            $(this).val(b);
        }
    })
};

二、使用label標籤來模擬

這種方式比較符合標準，label具有了語義，而且避免了前一種方式的大部分缺點，推薦使用。具體的實現一般是通過絕對定位來將label和input進行重疊，然後配合javascript來調整label標籤的顯示和隱藏。

但是這裏有個問題：當瀏覽器有自動填充表單功能時，input就會和label上的文字重疊，很難看，這種情況很難處理，即使使用onpropertychange/oninput 也達不到最佳的效果。這裏介紹一個技巧：就是使用z-index讓input處於label標籤的上方，這樣當瀏覽器自動填充時，input就會帶有黃色的背景，擋住下方label的文字。

三、使用html5的placeholder屬性

這個屬性很好用，不再依賴js來完成，瀏覽器原生支持的當然更爽，可惜這個屬性只在標準瀏覽器中支持，ie不支持。placeholder在各瀏覽器中的表現也不一樣，普通的css無法更改其默認樣式，這是因爲瀏覽器使用了優先級更高的僞類重置了樣式，我們只需要在css中重寫改僞類即可。如firefox：input:-moz-placeholder{color:#999}。

上述3中方法沒有最優的，只有最合適的，根據實際情況來進行取捨。當然可能還有其他更好的實現方式，歡迎討論。