【整理】javascript不同方式實現文本輸入框的placeholder。

繼上一篇 javascript優雅實現文本輸入框的placeholder 之後，又試圖找尋了其它更好的方式去實現這個placeholder。

 

我們想要實現的placeholder效果為：

鍵盤落下的時候就清空placeholder，

鍵盤抬起的時候如果值為空白就還原placeholder

實現方式多種多樣，整理如下：

 

第一種方式：

　　進階瀏覽器對input使用placeholder屬性。而對於IE進行單獨的處理。

　　對IE的處理方式。

　　　　1.  註冊keydown，focus事件，把placeholder改為value的值。（低級瀏覽器註冊keyup，keydown實現此功能有閃動的bug）

　　　　　  缺點：a.　最終無法實現在IE下，鍵盤keyup的時候，值一旦為空白就馬上還原placeholder。

　　　　　　　　　　  只能採用降級處理。在IE下，失去游標的時候，才去判斷值是否為空白，為空白的話還原placeholder。

　　　　　  優點：a.   相對與第二種方式，可不必考慮複製文本到輸入框，自動填滿等等會導致文本與placeholder重疊的問題。

 

第二種方式：

　　在input附近建立一個span標記。span的內容為placeholder的內容。使用絕對位置使span壓在input之上。

　　兩種處理方式。

　　　　1. 參照 javascript優雅實現文本輸入框的placeholder中的方式

　　　　　 思路：進階瀏覽器：註冊keyup，keydown事件。

　　　　　　　　 低級瀏覽器：註冊keydown，focus事件。（因為低級瀏覽器註冊keyup，keydown有閃動的bug）

　　　　　 缺點：a.　最終無法實現在IE下，鍵盤keyup的時候，值一旦為空白就馬上還原placeholder。

　　　　　　　　　　 只能採用降級處理。在IE下，失去游標的時候，才去判斷值是否為空白，為空白的話還原placeholder。

　　　　　　　　 b.   複製文本，直接拖到input框裡，或自動填滿使用者名稱等。會導致placeholder與值重疊且很難解決此bug。

　　　　2. 對input使用oninput事件。並對IE進行相容。

　　　　 　思路： 使用oninput事件。監聽當input的值一旦改變，就判斷是否為空白，如果為空白，就顯示placeholder，否則就隱藏placeholder。

　　　　　 優點： a. 可以使IE與進階瀏覽器表現一致。

　　　　　　　　  b. 可解決複製文本等導致placeholder與值重疊的bug。

　　　　　 缺點： a. 在FF瀏覽器下，使用者名稱密碼的自動填滿時，密碼域仍然會重疊。

　　　　　　　　　　但此bug可以解決。例如可以給使用者名稱單獨註冊oninput，使其值改變時過幾毫秒便清空密碼域

 

綜上所述：

如果一定要求IE與進階瀏覽器表現完全一致。可使用二.2的方法實現，但此方法實現，複雜，需要解決很多bug。

如果可以不糾結 IE的表現（值為空白，失去游標的時候才還原placeholder而不是鍵盤抬起時即刻還原placeholder）可使用第一種方法實現，簡單，且為支援新屬性貢獻一行代碼。

 

另：

第二種方式，當樣式表失效時，placeholder可以顯示出來，與input套在一個label下面，可以使使用者點擊文字，input就可以自動得到游標。

第一種方式如果想實現第二種方式的這個特性，可以在input旁寫一個隱藏的span。與input套在同一個label下面，樣式表失效時仍然可以得到良好的使用者體驗。