2021-7-19 前端達人
input輸入框在獲得或失去焦點時隱藏或顯示文字,這樣的焦點效果想必很多朋友在填寫form表格的時候都曾見識過吧,本文使用jquery實現(xiàn)以下,感興趣的朋友可以參考下哈
大家可以看效果圖的搜索輸入框,默認(rèn)顯示著“用戶名/Email”的提示,當(dāng)這個 input 輸入框獲得焦點時,就自動清空等待用戶輸入,當(dāng)用戶啥也沒輸入就離開這個 input 輸入框時,輸入框內(nèi)又再次顯示“用戶名/Email”的提示。是不是很常見?很多搜索、登錄、表單都會用到這個效果,但是我看了N多個網(wǎng)站,有90%以上是這么實現(xiàn)的:
<input type="text" value="搜索關(guān)鍵字" onfocus="if(this.value == '搜索關(guān)鍵字') this.value = ''" onblur="if(this.value =='') this.value = '搜索關(guān)鍵字'" />
我是非常反對把 javascript 寫在 html 標(biāo)簽里的,這和 style 寫在 html 標(biāo)簽里一樣,雖然不違反 W3C 標(biāo)準(zhǔn),但也不推薦這么寫。因為:
1.完全沒有復(fù)用性可言,如果是個表單,輸入框很多,每個都需要這樣的效果,那就每個都這么處理嗎?
2.如果要修改其中的提示文字,費時費力又不好維護。
3.我們倡導(dǎo)結(jié)構(gòu)(html)、表現(xiàn)(css)、行為(javascript)三者分離,這才是一個好的頁面。
那要怎么寫才能實現(xiàn)這個效果,而且既有復(fù)用性,又好維護,又不需要把 js 寫進 html 里呢?
具體方法如下:
首先肯定是引入jQuery
Html代碼:
<div><input type="text" value="提示測試" class="input_test" /></div> <div><input type="text" value="請輸入搜索關(guān)鍵" class="input_test" /></div>
jQuery代碼:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $('.input_test').bind({ focus:function(){ if (this.value == this.defaultValue){ this.value=""; } }, blur:function(){ if (this.value == ""){ this.value = this.defaultValue; } } }); }) </script>
只要在實現(xiàn)的input輸入框加上”input_test”這個class就可以輕松實現(xiàn)了
文章來源:博客園
分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(zé)聲明:藍藍設(shè)計尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。
藍藍設(shè)計( tweetduck.com )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
藍藍設(shè)計的小編 http://tweetduck.com