jQuery - 如果文本输入在已经获得焦点时单击，则执行某些操作

Question

我正在尝试制作一个带有自动建议面板的搜索框，如果用户在已经获得焦点后单击搜索框，该面板就会关闭。我尝试检查 $("#search_box").is(":focus") 并使用以下代码，两者都有相同的问题:

var fade_in=function() {
    $("#search_panel").fadeIn(100);
};

$(document).ready(function() {
    $("#search_panel").fadeOut(100);

    $("#search_box").focus(function() {
        $(this).on("click", fade_in);
    });

    $("#search_box").blur(function() {
        $(this).off("click", fade_in);

        $("#search_panel").fadeOut(100);
    });
});

事件的顺序似乎使得搜索面板总是在第一次点击时出现 - 顺序是:

• 用户点击搜索框
• 它成为焦点
• 添加了点击处理程序
• 然后触发点击事件导致面板出现

而我希望它是:

• 用户点击搜索框
• 点击事件被触发
• 该框成为焦点，因此添加了点击处理程序
• 还没有发生任何事情，因为点击事件发生时尚未添加处理程序。

第二次单击时，面板应该出现，因为输入框已经获得焦点。

这是当前代码:http://jsfiddle.net/DtfYq/

Answer 1

如果我理解正确，我相信以下代码应该可以完成您的任务:

var toggle=function() {
    $("#search_panel").fadeIn(100);
};

$(document).ready(function() {
    $("#search_panel").fadeOut(100);

    $("#search_box").on("click", function() {
        if ($(this).is(':focus')) {
            $(this).on("click", toggle);
        } else {
            $(this).focus();
        }
    });

    $("#search_box").blur(function() {
        $(this).off("click", toggle);

        $("#search_panel").fadeOut(100);
    });
});

Revised JSFiddle:

我对其进行了修改，以便当单击搜索框时，它会检查该元素是否具有焦点。如果是，它会附加 click 事件。否则，它只会专注于它。