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

<form>ではなく、フィールド自体が.focus()リスナーになるように設定する必要があります。

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

次のようになります。

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

あなたは$.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

これは、あなたが探しているものにsimliar経験である場合があります。

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) 

デフォルトで使用していた不透明度などはわかりませんでした。これは間違いなく動作します。