首頁 > web前端 > js教程 > input 輸入框獲得/失去焦點時隱藏/顯示文字(jquery版)_jquery

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

WBOY
發布: 2016-05-16 17:38:34
原創
1240 人瀏覽過

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


複製程式碼

程式碼如下:





我非常反對把javascript 寫在html 標籤裡的,這和style 寫在html 標籤裡一樣,雖然不違反W3C 標準,但也不建議這麼寫。因為:
1.完全沒有復用性可言,如果是個表單,輸入框很多,每個都需要這樣的效果,那就每個都這麼處理嗎?
2.如果要修改其中的提示文字,費時費力又不好維護。
3.我們倡議結構(html)、表現(css)、行為(javascript)三者分離,這才是一個好的頁面。 那要怎麼寫才能實現這個效果,而且既有復用性,又好維護,又不需要把 js 寫進 html 裡呢? 具體方法如下: 首先肯定是引入jQuery Html代碼:

複製代碼

代碼如下:


複製代碼


程式碼如下:



}
}
}); }) 只要在實現的input輸入框加上”input_test”這個class就可以輕鬆實現了查看:Demo
相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板