<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>
          
  
      
    

          

	
          
		
          
			
          
				
          jquery獲取焦點和失去焦點事件代碼
          
				
           2021-6-9      前端達人      
          
			
          
			
          
				
          
    鼠標在搜索框中點擊的時候里面的文字就消失了，經常會用到搜索框的獲得焦點和失去焦點的事件，接下來介紹一下具體代碼，感興趣的朋友額可以參考下

          

          

          

          
    input失去焦點和獲得焦點
          
鼠標在搜索框中點擊的時候里面的文字就消失了。
          
我們在做網站的時候經常會用到搜索框的獲得焦點和失去焦點的事件，因為懶，每次都去寫非常的煩，于是就一勞永逸，遇到類似情況就來調用一下就OK 了
          
相關js代碼:
          
    
          
        復制代碼代碼如下:
    
          
    
          
        
          
<html xmlns="http://www.w3.org/1999/xhtml">
          
<head>
          
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
          
<title>input失去焦點和獲得焦點jquery焦點事件插件 - 懶人建站</title>
          
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
          
<script type="text/javascript">
          
$(document).ready(function(){
          
//focusblur
          
jQuery.focusblur = function(focusid) {
          
var focusblurid = $(focusid);
          
var defval = focusblurid.val();
          
focusblurid.focus(function(){
          
var thisval = $(this).val();
          
if(thisval==defval){
          
$(this).val("");
          
}
          
});
          
focusblurid.blur(function(){
          
var thisval = $(this).val();
          
if(thisval==""){
          
$(this).val(defval);
          
}
          
});
          
};
          
/*下面是調用方法*/
          
$.focusblur("#searchkey");
          
});
          
</script>
          
</head>
          
<body>
          
<form action="" method="post">
          
<input name="" type="text" value="輸入搜索關鍵詞" id="searchkey"/>
          
<input name="" type="submit" id="searchbtn" value="搜索"/>
          
</form>
          
<p>input失去焦點和獲得焦點jquery焦點事件插件，<br/><strong style="color:#F00">鼠標在搜索框中點擊的時候里面的文字就消失了</strong>。</p>
          
</body>
          
</html>
          
    
          

          
jquery獲取和失去焦點事件
          
    
          
        復制代碼代碼如下:
    
          
    
          
        
          
<script src="jquery-1.9.1.js" type="text/javascript"></script>
          
<script type="text/javascript">
          
$(function () {
          
$('#username').focus(function ()//得到教室時觸發的時間
          
{
          
$('#username').val('');
          
})
          
$('#username').blur(function () 失去焦點時觸發的時間
          
{
          
if ($('#username').val() == 'marry') {
          
$('#q').text('用戶名已存在！')
          
}
          
else { $('#q').text('ok!') }
          
        
          
            })
        
          
        
          
            
          
        
          
        
          
            
          
        
          
        
          
            
          
                藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
            
          
            
          
                截屏2021-05-13 上午11.41.03.png
          
          
            
          
            
          
                
          
            
          
            
          
                部分借鑒自：腳本之家
            
          
            
          
                原文鏈接：
            
          
            
          
                分享此文一切功德，皆悉回向給文章原作者及眾讀者.
            
          

            
          
                免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
            
          
          
            
          
                藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
            
          
        
          
    
          

          				
          
								
			
          
		
          
		
		
	
          


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

          

          



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