Javascript-关闭Modal后关注元素

Question

我有一个带自动对焦功能的按钮。当用户点击按钮(或按下"回车键"，因为它有自动对焦功能(时，会弹出一个模式。该模态还有一个带有自动对焦属性的输入字段。用户在那里键入内容并按下"回车键"后，模态将关闭。

在关闭模态之后，我想让初始按钮再次聚焦。但我无法让它发挥作用。

我尝试将autofocus属性添加到按钮本身，还尝试将document.getElementById("myBtn").focus();添加到关闭模态的函数。没有任何效果。

我试着用一个按钮替换输入字段来关闭模态，它是这样工作的，所以我想问题a与输入中的onKeyDown="if(event.keyCode==13) closeModal();有关，因为"回车键"在页面中用于不止一件事。

我的假设正确吗？有没有办法让它在这种条件下工作？

以下是我正在使用的简化版本：

var modal = document.getElementById('myModal');
var btn = document.getElementById("myBtn");
btn.onclick = function() {
modal.style.display = "block";
document.getElementById("modalInput").focus();
}
function closeModal() {
modal.style.display = "none";
document.getElementById("myBtn").focus();
}

.modal {
display: none;
position: fixed;
z-index: 1;
padding-top: 200px;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.4);
}
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
width: 30%;
text-align: center;
}

<button id="myBtn" autofocus>Open Modal</button>
<div id="myModal" class="modal">
<div class="modal-content">
<p>This is a modal.</p>
<input id="modalInput" type="text" autofocus onKeyDown="if(event.keyCode==13) closeModal();">
</div>
</div>

Answer 1

在按下带有输入标记的回车键时，会同时调用聚焦按钮。这会触发按钮上的立即回车键事件。

所以模态似乎没有结束。放置setTimeout会修复它。您可能需要使用:focuspsedo类选择器来设置它的样式，以使其像焦点一样显示。

var modal = document.getElementById('myModal');
var btn = document.getElementById("myBtn");
btn.onclick = function() {
modal.style.display = "block";
document.getElementById("modalInput").focus();
}
function closeModal() {
modal.style.display = "none";
setTimeout(function(){ 
document.getElementById("myBtn").focus();
},0)
}

.modal {
display: none;
position: fixed;
z-index: 1;
padding-top: 200px;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.4);
}
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
width: 30%;
text-align: center;
}

<button id="myBtn" autofocus>Open Modal</button>
<div id="myModal" class="modal">
<div class="modal-content">
<p>This is a modal.</p>
<input id="modalInput" type="text" autofocus onKeyDown="if(event.keyCode==13) closeModal();">
</div>
</div>