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

我正在尝试使用自动建议面板创建一个搜索框，如果用户在已经拥有焦点后点击搜索框，该面板就会关闭。 我已经尝试检查$（“＃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); }); }); 

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

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

而我希望它会：

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

在第二次单击时，面板应显示为输入框已经具有焦点。

这是当前的代码： 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); }); }); 

修订JSFiddle：

我已修改它，以便在单击搜索框时，它会检查该元素是否具有焦点。 如果是，则附加click事件。 否则，它只关注它。