关闭模式后自动对焦回旧框
关闭模式后自动对焦回旧框
提问于 2019-03-01 07:00:36
如果这是复制品，我很抱歉，但我在上面找不到任何东西。
我是Javascript的新手，还在尝试理解事件侦听器和代码如何运行。
除此之外，我还有一个bootstrap模式窗口，当在输入框中输入一个数字并发布时，该窗口会弹出。
在弹出模式之前，该输入框上有一个自动聚焦功能。
我在这里找到了关于如何在模式窗口的按钮上设置自动对焦的帮助，它工作得很好，如下所示：
$('.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();
});我认为这就是所需要的一切。
回答 1
Stack Overflow用户
回答已采纳
发布于 2019-03-01 07:35:59
将输入焦点绑定到模式关闭。可行的解决方案是：
$('#myModal').on('hidden.bs.modal', function () {
$('#myInput').focus();
});还请注意，这里：
$("#no").click(function() {
$(this).find('[autofocus]').focus();
});this -是您单击的元素-似乎不正确尝试在其中查找其他DOM元素
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/54935611
复制相关文章
相似问题
腾讯云开发者
