Question

我需要在输入框处于焦点时显示div，并且我需要在不是焦点时隐藏此div。我尝试了以下方法，但它不起作用：

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

#passwordInfo是我试图改变显示的div。

Answer 1

最好在您的情况下听取focus和blur事件。

focus：当输入元素获得焦点时触发。例如，当用户单击输入元素

时

blur：当输入元素失去焦点时触发。例如，当用户在输入元素外部单击时。

＆＃13;

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

＆＃13;

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

＆＃13;

使用show()和hide()

实际上可以简化这一过程

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

或合并为一个功能

＆＃13;

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

＆＃13;

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

＆＃13;

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");
    });
});

使用jQuery持续检查焦点

2 个答案: