Question

My blur event hides the submit button; but doing that seems to cancel the submit event. I only want to hide when the submit itself wasn’t clicked. How can I determine if the focus was lost due to the submit, or due to just wandering off elsewhere?

<form action="" method="post">
    <textarea id="message" name="message"></textarea>
    <input type="submit" id="share" value="Share">
</form>
...

$('textarea').blur(function(){ 
     $('#share').hide() 
})
$('textarea').focus(function(){ 
     $('#share').show() 
})

Setting a timeout to allow the submit event to fire before coming back to the blur seems a bit hacky to me. Can’t we do better than that? Can I tell the blur not to block other events? or search the dom for a pending submit event? or … ?

---

Solution

for today is based on the ticked answer, but simpler. Use jquery’s “fadeOut” routine to

1. delay the hidden status of the submit button until after the submit event has fired, and
2. make the user feel like their submission is being handled

.

$('textarea').blur(function(){ 
     $('#share').fadeOut() 
})
$('textarea').focus(function(){ 
     $('#share').fadeIn() 
})

It’s indirect, and not really what I was looking for, but it seems clear that direct manipulation of the event queue – such as writing onBlur to say “if they did not click submit then hide the submit button” – is perhaps not technically possible.

Answer 1

This is one option, though a bit hacky using jQuery .queue() and .clearQueue() to set an animation queue and instantly clear it before anything happens:

   $(function() {
     $("#message").blur(function() {
       $("#share").delay(100).fadeOut();
     });
     $("#share").click(function() {
       $(this).clearQueue();
     });
   });

Note: Requires jQuery 1.4+