我有一个文本表单,其中包含名称的输入字段和电子邮件的输入字段。在移动网站上,当用户点击某个字段时,会使用其下方的键盘将其移至视口顶部。但是,当取消选择任一文本字段时,它会卡在此处并且不会重置。
我找到了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");
})
每次取消选择任一字段时都会触发。我希望它都不会被选中。
答案 0 :(得分: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;
});
&#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;
答案 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
}
,那么我们知道表格失去了焦点:重置标志并做其他必要的事情(在这种情况下,滚动到顶部)。此解决方案处理标签,单击,以及单击带有表单的标签。
click
&#13;
focusin
&#13;