Javascript

Question

我有一个带有自动对焦属性的按钮。当用户单击按钮（或按下 "enter key"，因为它具有自动对焦功能）时，会弹出一个模式。该模式也有一个带有自动对焦属性的输入字段。用户在那里输入内容并按下 "enter key" 后，模式将关闭。

我希望在关闭模式后再次聚焦初始按钮。但是我做不到。

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

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

我的假设对吗？有没有办法让它在这些条件下工作？

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

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>

Javascript - 关闭 Modal 后关注元素

Javascript - Focus on element after closing Modal

focus

autofocus

bootstrap-modal