input 輸入框獲得/失去焦點時隱藏/顯示文字(jquery版)_jquery

input 輸入框獲得與失去焦點時隱藏或顯示文字我們先看下效果圖
輸入框預設狀態:
 
輸入框取得焦點狀態:
 
輸入框取得焦點狀態:

 輸入框取得焦點狀態:  大家可以看效果圖的搜尋輸入框，預設顯示「使用者名稱/Email」的提示，當這個input 輸入框獲得焦點時，就自動清空等待使用者輸入，當使用者啥也沒輸入就離開這個input 輸入框時，輸入框內再次顯示「使用者名稱/Email」的提示。是不是很常見？很多搜尋、登入、表單都會用到這個效果，但是我看了N多個網站，有90%以上是這麼實現的：

複製程式碼

程式碼如下:





我非常反對把javascript 寫在html 標籤裡的，這和style 寫在html 標籤裡一樣，雖然不違反W3C 標準，但也不建議這麼寫。因為：
1.完全沒有復用性可言，如果是個表單，輸入框很多，每個都需要這樣的效果，那就每個都這麼處理嗎？
2.如果要修改其中的提示文字，費時費力又不好維護。

3.我們倡議結構（html）、表現（css）、行為（javascript）三者分離，這才是一個好的頁面。 那要怎麼寫才能實現這個效果，而且既有復用性，又好維護，又不需要把 js 寫進 html 裡呢？ 具體方法如下: 首先肯定是引入jQuery Html代碼:

複製代碼

代碼如下:

jQuery代碼:

複製代碼


程式碼如下:

}
}
}); }) 只要在實現的input輸入框加上”input_test”這個class就可以輕鬆實現了查看:Demo