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) 

我不确定您默认使用的不透明度等。这肯定会起作用。