分享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中方法沒有最優的，只有最合適的，根據實際情況來進行取舍。當然可能還有其他更好的實現方式，歡迎討論。