jQuery - 如果文本输入点击已经有焦点时做一些事情 [英] jQuery - do something if text input clicked when it already has focus

问题描述

我试图用一个自动提示面板来搜索框，如果用户点击搜索框已经有焦点的话就会下来。我已经尝试检查$（＃search_box）。is（：focus），并使用下面的代码，两者都有相同的问题：

<$ p $ （）＃code $ var fade_in = function（）{
$（＃search_panel）。
};
$ b $（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）;
}） ;
}）;

事件的顺序似乎使得搜索面板总是出现在第一个点击 - 订单是：

• 用户点击搜索框


• / li>
  
• 点击处理程序被添加


• 然后点击事件触发，导致面板出现

而我希望这将是：

• 用户点击搜索框


• 点击事件被触发


• 这个盒子变成了焦点，所以点击处理程序被添加了


• 因为点击事件发生时未添加处理程序。

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

以下是目前的代码： http：/ /jsfiddle.net/DtfYq/

解决方案

如果我我相信下面的代码应该做你以后的事情：

  var toggle = function（）{
 $（＃search_panel）。fadeIn（100）; 
}; 
 $ b $（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 （）; $ b $（this）.off（click，toggle）; 
 $ b $（＃search_panel）。fadeOut（100）; 
}）; 
}）; 
  

修正的JSFiddle：

我修改了它，以便当搜索框被点击时，它检查是否该元素有焦点。如果是，则附加点击事件。否则，它只关注它。

I am trying to make a search box with an auto-suggest panel that comes down if the user clicks on the search box once it already has focus. I have tried checking $("#search_box").is(":focus"), and using the following code, both of which had the same problem:

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

it seems that the order of the events makes it so that the search panel always comes up on the first click - the order is:

• the user clicks the search box
• it comes into focus
• the click handler is added
• and then the click event fires causing the panel to appear

whereas I was hoping it would be:

• the user clicks the search box
• the click event is fired
• the box comes into focus, so the click handler is added
• nothing happens yet, as the handler wasn't added when the click event occurred.

On the second click, the panel should appear as the input box will already have focus.

Here is the current code: http://jsfiddle.net/DtfYq/

解决方案

If I've understood you correctly, I believe the following code should do what you're after:

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:

I've amended it so that when the search box is clicked, it checks to see if that element has focus. If it does, it attaches the click event. Otherwise, it just focuses on it.

这篇关于jQuery - 如果文本输入点击已经有焦点时做一些事情的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！