jquery檢測用戶是否點擊了輸入 - 如果沒有做點什麼

Question

我有一個按鈕，點擊它時登錄顯示。我想如果輸入沒有被點擊後（比方說）10秒，.login將隱藏，並且按鈕將再次顯示。

標記：

<button>login</button> 

<div class="login" style="display:none"> 
    <input type="text" placeholder="username"> 
    <input type="text" placeholder="password"> 
    <input type="submit" value="send"> 
</div> 

JS：

$(function(){ 
    $('button').click(function(){ 
     $(this).fadeOut(200, function(){ 
      $('.login').fadeIn(); 
     });   
    }); 
}); 

演示：http://jsfiddle.net/Lxohzxt9/

Answer 1

您可以用setTimeout和clearTimeout

$(function(){ 
 
    var timer; 
 
    $('button').click(function(){ 
 
     $(this).fadeOut(200, function(){ 
 
      $('.login').fadeIn(); 
 
      timer = setTimeout(function() { 
 
       $('.login').fadeOut(function() { 
 
        $('button').fadeIn(); 
 
       }); 
 
      }, 2000); // 2 seconds for demo 
 
     });   
 
    }); 
 
    
 
    $('input[type="text"]').on('focus',function() { 
 
     clearTimeout(timer); 
 
    }); 
 
    
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<button>login</button> 
 

 
<div class="login" style="display:none"> 
 
    <input type="text" placeholder="username"> 
 
    <input type="text" placeholder="password"> 
 
    <input type="submit" value="send"> 
 
</div>

Answer 2

做某事這樣的（根據需要進行修改）：

$（函數（）{

var clickedOnInput = false; 
$('.login').on('mousedown', 'input', function(){ 
    clickedOnInput = true; 
}); 
$('button').click(function(){ 
    $(this).fadeOut(200, function(){ 
     $('.login').fadeIn(); 
     setTimeout(function(){ 
      if (!clickedOnInput) 
      { 
      //fadeback to other panel 

      } 
      clickedOnInput = false; // reset the variable 
     }, 10000) 
    });   
}); 

}）;