13

我正在构建一个带有简单演示电子邮件注册表单的小型登录页面。我希望在聚焦时打开表单字段，然后在模糊时缩小。

但是我面临的问题是，当您单击提交按钮时，这会引发模糊功能，隐藏按钮并缩小表单。只有当用户单击以关注提交按钮时，我才需要找到一种方法来停止 .blur() 方法。有什么好的解决方法吗？

将不胜感激我能得到的任何帮助！

4

4 回答 4

15

我知道这个问题很老，但最简单的方法是检查 event.relatedTarget。if 语句的第一部分是防止在 relatedTarget 为 null 时抛出错误（IF 会短路，因为 null 相当于 false 并且浏览器知道如果第一个条件为 false 则不必检查第二个条件在 && 语句中）。

所以：

if(event.relatedTarget && event.relatedTarget.type!="submit"){
     //do your animation 
}
于 2013-11-07T15:34:02.717 回答
10

这不是最漂亮的解决方案，但它确实有效。试试这个：

$("#submitbtn").mousedown(function() {
    mousedownHappened = true;
});

$("#email").blur(function() {
    if (mousedownHappened) // cancel the blur event
    {
        mousedownHappened = false;
    }
    else // blur event is okay
    {
        $("#email").animate({
            opacity: 0.75,
            width: '-=240px'
        }, 500, function() {
        });

        // hide submit button
        $("#submitbtn").fadeOut(400);
    }
});​

在这里演示

于 2012-12-05T18:30:37.567 回答
2

在 .blur 处理程序中试试这个：

if ($(':focus').is('#submitbtn')) { return false; }
于 2012-12-05T18:31:54.790 回答
1

为什么不依赖submit事件而不是click？http://jsbin.com/ehujup/5/edit

只需对 html 和 js 进行一些更改

将输入包装到form并添加required电子邮件，因为它显然假设是

<form id="form">
 <div id="signup">
   <input type="email" name="email" id="email" placeholder="me@email.com" tabindex="1" required="required">
   <input type="submit" name="submit" id="submitbtn" value="Signup" class="submit-btn" tabindex="2">
 </div>
</form>

在 js 中，删除监听的处理程序#submitbtn 

$("#submitbtn").on("click", function(e){
  e.stopImmediatePropagation();
  $("#signup").fadeOut(220);
});

并使用提交表单列表器

$("#form").on("submit", function(e){
  $("#signup").fadeOut(220);
  return false;
});

你可以用$.ajax()它来让它变得更好。

这样做可以在验证方面获得优势，并且本机浏览器的 HTML5 验证器将检查支持的电子邮件格式。

于 2012-12-05T18:35:34.750 回答