6-3. 學習表單欄位提示字元的設計

學習表單欄位提示字元的設計

HTML部份:設計一個加入會員的表單,顯示表單文字欄位。


 

JS部份

PART1:先將文字欄位預設初始值的文字顏色設定成灰色,再將預設初始值儲存在陣列變數中
PART2:密碼欄位的提示文字在後方的span標籤中,先隱藏起來
PART3:運用each迴圈逐一處理文字欄位,當focus滑鼠點選時,設定字體顏色,再清除預設的初始值
PART4:當blur游標離開時,假如欄位沒有輸入值,就將陣列中儲存的初始值再加入欄位,再設定字體為灰色
PART5:如果是密碼欄位被點選時,顯示後方span標籤,游標離開密碼欄位時,隱藏後方span標籤


 

完成檔測試: