Question

I have a form with input fields and a button which fades in when you focus in any field.

I would like to make the button disappear when user clicks somewhere outside the form.
Just blur on input elements doesn’t work. As soon as you focus away of the input text field to press a submit button, the button disappears so you cannot press it.
I tried to have a blur method on form, but it didnt seem to work as well.

Thank you for any help.

$("#add_wall").click(function(){
    $("#new_wall").animate({
        opacity: 1,
        width: '350'
    }, 500, function() {
        $("#send_button").fadeIn(400);
    });
}); 

Form looks like

<form id="add_wall">
    <input id="new_wall" type="text"  placeholder="Compose new message..." />
    <button id="send_button" style="width:60px; margin-left:5px;" >Post</button>
</form>

Answer 1

You should be setting your field itself to have the .focus() listener, rather than the wrapping <form>.

$('#new_wall').focus( function(){
    $("#send_button").fadeIn(400);
});

$('#new_wall').blur( function(){
    $("#send_button").fadeOut(400);
});

Blur should work on the field. You can’t “unfocus” from something that can’t have focus (like an <a> or <input>).

Example: http://jsfiddle.net/7p77p/

I don’t know what you’re trying to do with your field when someone “clicks” on the form (not a solid interaction with the form), so I’m going to ignore that for now. Your field should carry the focus and blur events, however, and your button should respond in kind.

Edit: Based on silly oversight on my part.

Then the way I would handle it is this:

$('#new_wall').focus( function(){
    $("#send_button").fadeIn(400); // Button shows on focus

    // Create a temporary listener on the body to let someone 'click off'
    $('body').on('click.send_button_showing', function(){
        // User clicks off, button fades out, loses event, and body loses event
        $('#send_button').fadeOut(400);
        $('#send_button').off('click.send_button_click');
        $('body').off('click.send_button_showing');
    });

    // Create temporary event that stops bubbling of the body click 
    // with .stopPropagation()
    $('#send_button').on( 'click.send_button_click', function(e){
        e.stopPropagation();
        // Do your send button actions
    });
});