3

I have a search box that is small in normal state. on focus it expands, and a submit button shows up. This was done to save space. now, on blur, the search box shrinks again, and the submit button goes away.

Problem is, the click to the submit button IS the blur (which happens before it gets submit) there by making the submit button a 'race' to click it in the right spot.

I don't want to use an interval/timer... over kill.

Ideally, i just want the blur to not happen if focus is on the submit button.

$('#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 is the input

ctrl_search is the submit button

I want to change

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

to something like:

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

but that obviously doesn't work. lol

Can something like this be fanageled?

help!

4

1 回答 1

3

我不知道您正在寻找的解决方案的复杂性或简单性，但您可以简单地将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或使用其他一些花哨的功能来删除空格，以防用户输入空格并意外点击。

将其添加到那里是为了很好的衡量标准。

于 2013-04-11T21:36:40.033 回答