他的龙根本太大了_动漫美女被吸乳视频漫画_欧美xxxx性疯狂bbbb_天天看天天爽天天摸天天添

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

2021-7-19    前端達人

input輸入框在獲得或失去焦點時隱藏或顯示文字,這樣的焦點效果想必很多朋友在填寫form表格的時候都曾見識過吧,本文使用jquery實現以下,感興趣的朋友可以參考下哈

大家可以看效果圖的搜索輸入框,默認顯示著“用戶名/Email”的提示,當這個 input 輸入框獲得焦點時,就自動清空等待用戶輸入,當用戶啥也沒輸入就離開這個 input 輸入框時,輸入框內又再次顯示“用戶名/Email”的提示。是不是很常見?很多搜索、登錄、表單都會用到這個效果,但是我看了N多個網站,有90%以上是這么實現的: 

<input type="text" value="搜索關鍵字" onfocus="if(this.value == '搜索關鍵字') this.value = ''" onblur="if(this.value =='') this.value = '搜索關鍵字'" /> 

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

<div><input type="text" value="提示測試" class="input_test" /></div> 
<div><input type="text" value="請輸入搜索關鍵" 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> 
復制代碼

只要在實現的input輸入框加上”input_test”這個class就可以輕松實現了 




藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

截屏2021-05-13 上午11.41.03.png



文章來源:博客園

分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

藍藍設計m.ssll180.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 平面設計服務

日歷

鏈接

個人資料

藍藍設計的小編 http://m.ssll180.com

存檔