使用jQuery連續檢查焦點

Question

只要輸入框處於焦點狀態，我需要顯示div，而當焦點不是焦點時，我需要隱藏div。我嘗試以下，但它不工作：

$(document).ready(function() { 
    if ($("#inputPassword").is(":focus")){ 
     $("#passwordInfo").css("display", "block"); 
    } 
    else { 
     $("#passwordInfo").css("display", "none"); 
    } 
}); 

#passwordInfo是我試圖改變顯示的股利。

Answer 1

最好在您的案例中傾聽focus和blur事件。

focus：當輸入元素獲得焦點時觸發。例如，當用戶點擊一個輸入元素時：當輸入元素失去焦點時觸發輸入元素

blur：當輸入元素失去焦點時觸發。例如，當用戶點擊輸入元素的外部時。

var div = $("#text"); 
 
div.hide(); 
 

 
$("#input-field").on("focus", function() { 
 
    div.css({ "display": "block" }); 
 
}).on("blur", function() { 
 
    div.css({ "display": "none" }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="text" id="input-field" /> 
 

 
<div id="text">This is text</div>

這可實際使用show()和hide()

$("#input-field").on("focus", function() { 
    div.show(); 
}).on("blur", function() { 
    div.hide(); 
}); 

簡化或合併成一個功能

var div = $("#text"); 
 
div.hide(); 
 

 
$("#input-field").on("focus blur", function(event) { 
 
    div.toggle(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="text" id="input-field" /> 
 

 
<div id="text">This is text</div>

Answer 2

if ($("#inputPassword").is(":focus"))代碼僅在文檔第一次就緒時運行，因此檢查不會重複執行。

你在找什麼是.focus()和.blur()功能。

$(document).ready(function() { 
    $("#inputPassword").focus(function() { 
     $("#passwordInfo").css("display", "block"); 
    }); 
    $("#inputPassword").blur(function() { 
     $("#passwordInfo").css("display", "none"); 
    }); 
});