javascript - 如何检测整个表单是否失焦？

Question

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

我发现 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>