JQuery, когда пользователь нажимает за пределами формы

Question

У меня есть форма с полями ввода и кнопка, которая исчезает при фокусировке на любом поле.

Я бы хотел, чтобы кнопка исчезала, когда пользователь нажимает где-то за пределами формы. Просто размытие на элементах ввода не работает. Как только вы отводите фокус от поля ввода текста, чтобы нажать кнопку отправки, кнопка исчезает, и вы не можете ее нажать. Я пытался использовать метод размытия в форме, но, похоже, он тоже не работал.

Спасибо за любую помощь.

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

Форма выглядит как

<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

Вы должны сами настроить свое поле, чтобы иметь прослушиватель .focus(), а не перенос <form>.

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

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

Размытие должно работать на поле. Вы не можете «расфокусировать» что-то, что не может иметь фокус (например, <a> или <input>).

Пример: http://jsfiddle.net/7p77p/

Я не знаю, что вы пытаетесь сделать со своим полем, когда кто-то "щелкает" по форме (а не по общему взаимодействию с формой), поэтому я пока проигнорирую это. Однако ваше поле должно содержать события фокусировки и размытия, а ваша кнопка должна отвечать тем же.

Редактировать: Основано на глупой оплошности с моей стороны.

Тогда я бы поступил так:

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

Answer 2

Это может быть похоже на то, что вы ищете:

http://jsfiddle.net/ZN4dd/1/

var theField = $("#new_wall");
var theButton = $("#send_button");
var theForm = $("#add_wall");

// показать форму

function showForm() {
    theField.stop().animate({
        opacity: 1,
        width: '350'
    }, 500, function() {
        theButton.fadeIn(400);
    });
}

//скрыть форму

function hideForm() {
    if (!theField.is(":focus") && !theButton.is(":focus")) {
        theField.stop().animate({
            opacity: 1,
            width: '110'
        }, 500, function() {
            theButton.fadeOut(400);
        });
    }
}
theForm.click(showForm).mouseenter(showForm).mouseleave(hideForm);
theField.blur(hideForm)

Я не был уверен в непрозрачности и т. д., которые вы использовали по умолчанию.Тогда это точно сработает.

Answer 3

Вы можете использовать $.hover для установки / отмены скрытого свойства в форме, а затем, когда пользователь нажимает что-либо, вы смотрите на свойство этой формы.Выглядит так:

$('form').hover(function(){ 
      $('form').attr('animate_me',false); 
}, function(){
      $('form').attr('animate_me',true); 
});

$(document).click(function(){
      if($('form').attr('animate_me')===false) return;
      // you can hide your button here.
});

Answer 4

Возможно:

$('body').on('click',function(e){
    var targetTagName = e.target.tagName.toLowerCase();
    if (targetTagName == 'input'){
        $('#send_button').fadeIn(500);
    }
    else if (targetTagName !== 'form'){
        $('#send_button').fadeOut(500);
    }
});​

JS Fiddle demo .