如何检测整个表单何时失焦？

Question

我有一个文本表单，其中包含一个名称输入字段和一个电子邮件输入字段。在移动网站上，当用户单击一个字段时，它会被带到视口的顶部，而键盘在其下方。但是，当取消选择任一文本字段时，它会卡在此处并且不会重置。

我找到了 jquery focusOut 事件来重置页面缩放，但是当任一字段未聚焦时（即，当名称字段处于活动状态而电子邮件不处于活动状态时）就会触发此事件。如何检测两个输入字段何时都不是焦点？

现在我的表单代码是：

<form class="form-signin" action="http://" method="post" id="subForm" onsubmit="movedrop()"> 
        <input type="text" class="form-control" id="fieldName" name="cm-name" placeholder="Full Name" tabindex=1 required>
        <label for="inputEmail" class="sr-only">Email address</label>
        <input type="email" id="fieldEmail" name="cm-hjjhkh-hjjhkh" class="form-control" placeholder="Email" tabindex=2 required>
        <button class="btn btn-lg btn-white btn-block subscribe" id="click-subscribe" type="submit" tabindex=3>SUBSCRIBE</button>
</form>

还有我的javascript：

$("form").focusout(function() {
document.body.scrollTop = 0;
console.log("focus out");
})

每次取消选择任一字段时都会触发。我希望它在两者都未被选中时触发。

Answer 1

您需要检查其他成员在此期间是否处于活动状态。 Focusout 只是告诉您输入字段之一何时失去焦点。

试试下面的代码：

$("form").focusout(function() {
    var anyActive = false;
    $.each($(this).find(':input'), function(index, inputField){
        if($(inputField).is(':active')){
            anyActive = true;
        }
    });
    if(anyActive){
        $('#focusBox').html('One is active');
    } else {
        $('#focusBox').html('None is active');
    }
    document.body.scrollTop = 0;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="form-signin" action="http://" method="post" id="subForm" onsubmit="movedrop()"> 
        <input type="text" class="form-control" id="fieldName" name="cm-name" placeholder="Full Name" tabindex=1 required>
        <label for="inputEmail" class="sr-only">Email address</label>
        <input type="email" id="fieldEmail" name="cm-hjjhkh-hjjhkh" class="form-control" placeholder="Email" tabindex=2 required>
        <button class="btn btn-lg btn-white btn-block subscribe" id="click-subscribe" type="submit" tabindex=3>SUBSCRIBE</button>
</form>

<div id="focusBox"></div>

Answer 2

过去，我通过查看整个页面的焦点事件来处理此类事情。本质上，我使用两个标志来跟踪表单 1) 是否具有焦点和 2) 是否曾经具有焦点。然后，我对click 和focusin 使用单个处理程序来查看事件目标的整个主体：如果该目标在表单内，我们就知道表单没有失去焦点。如果不是wasFormFocused，那么我们知道表单失去了焦点：重置标志并执行其他任何必要的操作（在这种情况下，滚动到顶部）。此解决方案处理标签、点击以及点击表单的标签。

var wasFormFocused = false, isFormFocused = false;

$("#theForm").focusout(function() {
    isFormFocused = false;
});

var handleClickOrTab = function(event) {
    if ($(event.target).parents("#theForm").length) {
        wasFormFocused = true;
        return;
    }

    if (wasFormFocused && !isFormFocused) {
        wasFormFocused = false;
        document.body.scrollTop = 0;
        $("body").append('<br>form lost focus (scrollTop = 0)');
    }
}
$("body").click(handleClickOrTab).focusin(handleClickOrTab);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form id="theForm" class="form-signin" action="http://" method="post" id="subForm" onsubmit="movedrop()">
  <input type="text" class="form-control" id="fieldName" name="cm-name" placeholder="Full Name" tabindex=1 required>
  <label for="inputEmail" class="sr-only">Email address</label>
  <input type="email" id="fieldEmail" name="cm-hjjhkh-hjjhkh" class="form-control" placeholder="Email" tabindex=2 required>
  <button class="btn btn-lg btn-white btn-block subscribe" id="click-subscribe" type="submit" tabindex=3>SUBSCRIBE</button>
</form>

<h4>CLICK me (cause you can't tab to me)</h4>
<input type="text" placeholder="TAB to me or CLICK me">