jQuery - 模糊，但如果单击按钮则不会

Question

我的搜索框在正常状态下很小。焦点对准时，它会展开，并显示一个提交按钮。这样做是为了节省空间。现在，在模糊时，搜索框再次缩小，提交按钮消失。

问题是，通过使提交按钮成为“竞赛”以在正确的位置单击它，对提交按钮的点击会变得模糊(在提交之前发生)。

我不想使用间隔/计时器...过度杀戮。

理想情况下，我只希望焦点位于提交按钮上时不会发生模糊。

$('#searchtext').focus(function() {             
    $('#searchtext').stop().animate({'width':'175px'} , 800);
    $('#ctrl_search').fadeIn('slow');
});
$('#searchtext').blur(function() {      
    $('#searchtext').stop().animate({'width':'85px'} , 800);
    $('#ctrl_search').fadeOut('slow');
});

搜索文本是输入

ctrl_search是提交按钮

我想改变

$('#searchtext').blur(function() {

类似:

$('#searchtext').blur.not$('#ctrl_search').focus())(function() {    

但这显然行不通。哈哈

这样的事情也能被炒作吗？

救命!

Answer 1

我不知道您正在寻找的解决方案是复杂还是简单，但您可以简单地将您的 blur 动画包装在 if 语句中以检查并查看是否文本已输入(文本意味着有人想要实际搜索)。

$('#searchtext').focus(function() {             
    $('#searchtext').stop().animate({'width':'175px'} , 800);
    $('#ctrl_search').fadeIn('slow');
});
$('#searchtext').blur(function() {
    //Check to see if text is blank (after removing whitespace), if so they must not want to search
    if($('#searchtext').val().trim() == ''){
       $('#searchtext').stop().animate({'width':'85px'} , 800);
       $('#ctrl_search').fadeOut('slow');
    }
});

在这里摆弄:http://jsfiddle.net/sChkC/1/

Of course this is the simplest form, you could trim or use some other fancy function to remove whitespace in the case the user enters a space and clicks out accidentally.

将其添加到其中是为了更好地衡量。