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

可能：

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

我不確定您默認使用的不透明度等。這肯定會起作用。