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

searchtext是输入

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/

当然这是最简单的形式，您可以trim或使用一些在用户输入的情况下删除空格的其他奇特功能一个空间并意外地点击。

在那里添加了这个以获得良好的衡量标准。

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

1 个答案: