javascript - 模态关闭后自动对焦回到旧框
问题描述
如果这是重复的,我很抱歉,但我在上面找不到任何东西。
我对 Javascript 非常陌生,并且仍在尝试了解事件侦听器以及代码如何运行。
除此之外,我还有一个引导模式窗口,当将数字放入输入框中并发布时会弹出该窗口。
在模态弹出之前,该输入框上有一个自动对焦。
我在这里找到了有关如何将自动对焦放在模态窗口上的按钮上的帮助,它工作得非常好,如下所示:
$('.modal').on('shown.bs.modal', function() {
$(this).find('[autofocus]').focus();
});
我的问题是当模式窗口关闭时,我无法将自动对焦返回到输入框。
我尝试了各种版本,这两个是我的主要想法:
$("#no").click(function() {
$(this).find('[autofocus]').focus();
});
$("#no").click(function() {
$("staffID").focus();
});
其中staffID是输入框的id。
但它并没有将焦点重新放在输入框上。#no id 是模态框上的一个 id,因此如果您按 no,您希望原始站点返回并专注于输入。
有人可以指出我正确的方向吗?
也被要求提供 HTML,这里是(忽略冰岛语):
<!--CLOCKIN INPUT FORM-->
<form id="staffIdForm" method="post" action="" class="clockin-form">
<input id="staffID" type="text" name="starfsmannanumer" class="clockin-box" placeholder="Starfsmannanúmer" autofocus/>
<button id="clockIn" type="button" class="btn btn-success">Stimpla</button>
</form>
<!-- WELCOME MODAL -->
<div class="modal fade" id="welcome-modal" role="dialog" aria-labelledby="welcomeModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="welcomeModalLabel">
Góðan daginn <span id="nafn"></span>
</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Innstimplun skráð <span id="time"></span> þann <span id="date"></span></p>
<p>Viltu skrá þig í hádegismat?</p>
</div>
<div class="modal-footer">
<button id="no" type="button" class="btn btn-secondary" data-dismiss="modal" autofocus>Nei</button>
<button id="yes" type="button" class="btn btn-success">Já</button>
</div>
</div>
</div>
</div>
运行该问题需要以下 javascript:
$("#clockIn").off('click').on('click', function () {
$("#staffIdForm").submit();
});
$(function getEmployee() {
$("#staffIdForm").on('submit', function(e) {
var staffId = (document.getElementById("staffID").value);
console.log(staffId);
$.post("Attendance/Home/ClockIn", { starfsmannanumer: staffId }, function(data, status) {
console.log(data);
$("#nafn").text(data.name);
$("#clock-out-nafn").text(data.name);
$(function () {
//Display time in message
var dt = new Date();
document.getElementById("time").innerHTML = dt.toLocaleTimeString('en-GB');
document.getElementById("clock-out-time").innerHTML = dt.toLocaleTimeString('en-GB');
//Date message with Icelandic names
var monthNames = [
"janúar", "febrúar", "mars", "apríl", "maí", "júní",
"júlí", "ágúst", "september", "október", "nóvember", "desember"]
var day = dt.getDate();
var monthIndex = dt.getMonth();
document.getElementById("date").innerHTML = day + ". " + monthNames[monthIndex];;
document.getElementById("clock-out-date").innerHTML = day + ". " + monthNames[monthIndex];;
//Either check in or out message or error
if (data.userId == "-1") {
$("#invalid-staff-id").fadeIn('slow', function () {
$("#invalid-staff-id").delay(2000).fadeOut();
});
}
else if (data.timeIn != null && data.timeOut == null) {
$("#welcome-modal").stop(true).modal('show');
}
else if (data.timeIn != null && data.timeOut != null) {
$("#clock-out-message").fadeIn('slow', function() {
$("#clock-out-message").delay(5000).fadeOut();
//TODO: L�ta �tstimplunarskilabo� hverfa ef �tt er � takka
//TODO: Autofocus � 'Nei' takkann
});
}
})
document.getElementById("staffID").value = "";
});
e.preventDefault();
});
});
$('#welcome-modal').on('shown.bs.modal', function () {
$(this).find('[autofocus]').focus();
});
$('#welcome-modal').on('hidden.bs.modal', function () {
$("staffID").focus();
});
我认为这就是我们所需要的。
解决方案
将输入焦点绑定到模态关闭。工作解决方案将是:
$('#myModal').on('hidden.bs.modal', function () {
$('#myInput').focus();
});
还要注意,这里:
$("#no").click(function() {
$(this).find('[autofocus]').focus();
});
this
- 是您单击的元素 - 似乎不正确尝试在其中找到其他一些 DOM 元素
推荐阅读
- java - 服务器-客户端通信 Java。客户端在函数 readObject() 处冻结
- tablesorter - 如何在一列中按不同的行排序?
- python - 注释在 matplotlib 子图中消失
- machine-learning - 使用训练数据进行拟合和评分不能达到 100% 的准确度
- asp.net - IIS 中的 urlrewrite 与 global.asax 中的 https 替换 http
- flexbox - flexbox align-self 与 nth-child 问题
- python - 使用 argparse 在 python 3 中读取分隔的数字字符串
- javascript - 如何将两个数组组合成一个嵌套数组?
- python - 如何在python中生成像imgur这样的简短唯一ID?
- r - R使用过滤器和管道过滤以日期为条件的大型数据框