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);
});

Blur应该在这个领域工作。你无法从无法聚焦的事物中“疏忽”（例如<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

这可能是您正在寻找的简单体验：

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)

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

用户在表单外单击时的jQuery

4 个答案: