jQuery, wenn Benutzer außerhalb des Formulars klickt

Question

Ich habe ein Formular mit Eingabefeldern und eine Schaltfläche, die eingeblendet wird, wenn Sie in einem beliebigen Feld konzentrieren.

Ich möchte die Schaltfläche verschwinden lassen, wenn der Benutzer irgendwo außerhalb des Formulars klickt. Nur Unschärfe auf Eingabeelemente funktioniert nicht. Sobald Sie den Fokus des Eingabe-Textfelds verlassen, um eine Senden-Schaltfläche zu drücken, verschwindet die Schaltfläche, sodass Sie sie nicht mehr drücken können. Ich habe versucht, eine Unschärfemethode in Form zu haben, aber es schien nicht so gut zu funktionieren.

Vielen Dank für jede Hilfe.

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

Formular sieht aus wie

<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

Sie sollten Ihr Feld selbst so einstellen, dass es den Listener .focus() hat, anstatt den Wrapper <form>.

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

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

Blur sollte auf dem Feld arbeiten. Sie können nicht von etwas fokussieren, das nicht fokussiert werden kann (wie zB <a> oder <input>).

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

Ich weiß nicht, was Sie versuchen, mit Ihrem Gebiet zu tun, wenn jemand „Klicks“ auf dem Formular (keine feste Wechselwirkung mit der Form), so werde ich ignoriere das für jetzt. Ihr Feld sollte jedoch den Fokus und die Unschärfe-Ereignisse enthalten und Ihre Schaltfläche sollte in gleicher Weise reagieren.

Edit: Basierend auf dummer Aufsicht meinerseits.

Dann ist die Art, wie ich damit umgehen würde, ist dies:

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

Möglicherweise:

$('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.

Answer 3

Sie können von $.hover gesetzt/ungesetzt eine versteckte Eigenschaft auf dem Formular machen und dann, wenn der Benutzer etwas klickt, schauen Sie auf dieser Form Eigentum . Sieht wie folgt aus:

$('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

Dies ist ein simliar Erfahrung sein kann, was Sie suchen:

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

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

// zeigen die Form

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

// Verbergen Sie das Formular

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) 

Ich war mir nicht sicher, ob die Deckkraft usw. standardmäßig verwendet wurde. Das wird dann definitiv funktionieren.