Javascript-关闭Modal

Question

我有一个带有自动对焦属性的按钮。 当用户单击按钮（或按下“输入键”，因为它具有自动对焦）时，将弹出一个模式。 该模式也具有带有自动聚焦属性的输入字段。 用户在此处输入内容并按“输入键”后，模式将关闭。

在关闭模式后，我想使初始按钮再次聚焦。 但是我无法使其正常工作。

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

我尝试替换按钮的输入字段以关闭模式，并且它可以那样工作，所以我猜想问题与输入中的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将解决此问题。您可能需要使用:focus psedo-class选择器来设置其样式，以使其显示为焦点。

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>