jQuery - blur, but not if click on button

Question

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!

Just because i blur, i don't necessarily want to submit a search, so i don't think that's a valid use case unless i'm understandng you wrong??? Thanks though. — BReal14, Apr 11 '13 at 21:30
See there could help: http://stackoverflow.com/a/121708/1414562 — A. Wolff, Apr 11 '13 at 21:37
Interval/timer isn't overkill, it's a good solution in this case. — Ido Schacham, Apr 11 '13 at 21:46

zombiehugs · Accepted Answer · 2013-04-11T21:45:43.190

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.

I think this could be a good starting point. The problem is that if the user just types something and changes their mind, I would like for the box to shrink back to 85px. Perhaps this is where the timer factor comes in. ie8 doesn't seem to like this trim command either. Webpage error details Message: Object doesn't support this property or method pointing to the new if line num — BReal14, Apr 12 '13 at 13:02
this solved it: http://stackoverflow.com/questions/4232190/are-text-trim-really-cant-work-in-ie8 — BReal14, Apr 12 '13 at 13:19

jQuery - blur, but not if click on button

1 Answers1