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/

Answer 2

我建议在隐藏按钮的函数内部检查输入字段是否有一些值（如果是，你不想隐藏按钮，或者？）

e.g：

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

Answer 3

我们可以检查文本字段 on blur ，新焦点元素是否按钮。

$('#fieldEmail').focus(function () {
    $(this).next().addClass('visible');
}).blur(function () {
  if(!event.relatedTarget||event.relatedTarget.type!='submit')
    $(this).next().removeClass('visible');
});

form {
  color:#333;
  position: relative;
}

input {
  padding:0 5px 5px;
  text-align: center;
  border:none;
  text-transform: uppercase;
  font-size:12px;
  width:170px;
  margin-left:15px;
  float:left;
  letter-spacing: 2px;
}

button {
  display: none;

  background: #ff0000;
  border:none;

}


.arrow {
  background:#ff0000;
  width:15px;
  height:15px;
  display: block;
 
}

.visible {
    display:block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form  method="post" id="subForm" class="clearfix">
    <input id="fieldEmail" placeholder="email address" type="email"/>
    <button type="submit"><i class="arrow"></i></button>
</form>

Answer 4

我建议您在click上捕获每个document事件，如果target的{{1}}不是提交按钮或电子邮件输入然后隐藏event，如下所示，从submit button

中删除模糊事件

input

<强> DEMO HERE

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

4 个答案: