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

【问题标题】：jQuery - do something if text input clicked when it already has focusjQuery - 如果文本输入在已经获得焦点时单击，则执行某些操作
【发布时间】：2013-08-31 13:21:19
【问题描述】：

我正在尝试创建一个带有自动建议面板的搜索框，如果用户在搜索框已经获得焦点后点击该面板，该面板就会自动弹出。我尝试检查 $("#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/

【问题讨论】：

真的，我们还需要查看 HTML。更好的是，将相关的 HTML 和 JavaScript 放在 JSFiddle
好的，这里是：jsfiddle.net/DtfYq
您可能希望将其包含在您的问题中以使其更加突出

标签： jquery input focus

【解决方案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 事件。否则，它只会专注于它。

【讨论】：