CODEWITHSUNDEEP
jqueryfocusblur
BReal14
BReal14

Reputation: 1584

jQuery - blur, but not if click on button

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!

Upvotes: 3

Views: 1991

Answers (1)

zombiehugs
zombiehugs

Reputation: 717

I don't how know complex or simple of a solution you are looking for but you could simply wrap your blur animation inside an if statement to check and see if text has been entered (text would mean someone wants to actually search). 

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

Fiddle here: 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.

Added this in there for good measure.

Upvotes: 3

Related Questions