Question

我正在尝试使用自动建议面板创建一个搜索框，如果用户在已经拥有焦点后点击搜索框，该面板就会关闭。我已经尝试检查$（“＃search_box”）。是（“：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事件。否则，它只关注它。

jQuery - 如果文本输入已经具有焦点，则执行某些操作

1 个答案: