javascript - 尝试单击时输入切换焦点隐藏提交按钮

Question

我有一个表单，如果您单击输入字段使其获得焦点，就会显示提交按钮。

但是我遇到的问题是，当您尝试单击提交按钮时，它会消失，因为焦点已从输入中移除。

这是我的代码:

<form  method="post" id="subForm" class="clearfix">
    <input id="fieldEmail" placeholder="email address" type="email"/>
    <button type="submit"><i class="arrow"></i></button>
</form>


$('#fieldEmail').focus(function () {
    $(this).next().addClass('visible');
}).blur(function () {
    $(this).next().removeClass('visible');
});

And here is a JSFiddle

保持类切换“可见”但允许我单击提交按钮的最佳方法是什么？

Answer 1

这与事件的顺序有关。

您可以使用 mousedown 检测焦点移动到的位置，因为它在 blur 之前触发:

(function () {
    var submit_focus = false;
    $('#fieldEmail').focus(function () {
        $(this).next().addClass('visible');
    }).blur(function () {
        if (submit_focus) {
            submit_focus = true;
        } else {
            $(this).next().removeClass('visible');
        }
    });

    $('#submit').mousedown(function () {
        submit_focus = true;
    });
}());

http://jsfiddle.net/cnLon9k3/4/