如何检测整个表格何时失焦?

时间:2016-03-21 22:33:40

标签: javascript jquery html forms focus

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

我找到了jquery focusOut事件来重置页面缩放,但是当任何一个字段没有聚焦时(即当名字字段处于活动状态而电子邮件不是)时,它会触发。如何检测NEITHER输入字段何时聚焦?

现在我的表单代码是:

<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");
})

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

2 个答案:

答案 0 :(得分:1)

在此期间,您需要检查其他成员是否都没有变为活动状态。 Focusout只会告诉您其中一个输入字段何时失去焦点。

请尝试以下代码:

&#13;
&#13;
$("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;
});
&#13;
<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>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

我过去通过查看整个页面的焦点事件来处理此类事情。基本上,我使用两个标志来跟踪表格1)是否具有焦点,2)是否有焦点。然后,我为整个主体使用单个处理程序查看事件的目标:如果该目标位于表单内,我们知道表单没有&#39;失去了焦点。如果没有@Entity @Table(name = "CARD") public class Card { @Id private Long card_id; @OneToMany private List<Transaction> transactions = new ArrayList<>(); // Getters and Setters } ,那么我们知道表格失去了焦点:重置标志并做其他必要的事情(在这种情况下,滚动到顶部)。此解决方案处理标签,单击,以及单击带有表单的标签。

&#13;
&#13;
click
&#13;
focusin
&#13;
&#13;
&#13;