<address id="ttjl9"></address>
      <noframes id="ttjl9"><address id="ttjl9"><nobr id="ttjl9"></nobr></address>
      

      <form id="ttjl9"></form>
        <em id="ttjl9"><span id="ttjl9"></span></em>
        <address id="ttjl9"></address>

          <noframes id="ttjl9"><form id="ttjl9"></form>
          
  
      
    

          

	
          
		
          
			
          
				
          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

          



          
文章來源：博客園
          

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

          

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

          				
          
								
			
          
		
          
		
		
	
          


          
    
  
          
    
          日歷
          
    
          
        
          
        
    
          
  
          
    
    
          
      
          鏈接
          
      
            
                
          
    
          
    
          
      
          個人資料
          
      
          
          
          
                    
          
          
          藍藍設計的小編
          http://www.syprn.cn
          
      
          
    
          
    
          
      
          存檔
          
      
    
          

          

          



亚洲va欧美va天堂v国产综合