Javascript - Focus on element after closing Modal - Stack Overflow

admin管理员组

文章数量:1406942

I have a button with the autofocus atribute. When the user clicks on the button (or presses the "enter key", since it has autofocus), a modal pops up. That modal has an input field with the autofocus attribute as well. After the user types something there and presses the "enter key", the modal will be closed.

I would like to have the initial button focused again, after closing the modal. But I cannot make it work.

I tried both adding the autofocus attribute to the button itself and I also tried adding document.getElementById("myBtn").focus(); to the function that closes the modal. None worked.

I tried replacing the input field for a button to close the modal and it works that way, so I guess the problema has something to do with the onKeyDown="if(event.keyCode==13) closeModal(); in the input, since the "enter key" is used for more than one thing in the page.

Are my assumptions right? Is there a way to make it work in these conditions?

Here's a simplified version of what I am working with:

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>

I have a button with the autofocus atribute. When the user clicks on the button (or presses the "enter key", since it has autofocus), a modal pops up. That modal has an input field with the autofocus attribute as well. After the user types something there and presses the "enter key", the modal will be closed.

I would like to have the initial button focused again, after closing the modal. But I cannot make it work.

I tried both adding the autofocus attribute to the button itself and I also tried adding document.getElementById("myBtn").focus(); to the function that closes the modal. None worked.

I tried replacing the input field for a button to close the modal and it works that way, so I guess the problema has something to do with the onKeyDown="if(event.keyCode==13) closeModal(); in the input, since the "enter key" is used for more than one thing in the page.

Are my assumptions right? Is there a way to make it work in these conditions?

Here's a simplified version of what I am working with:

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>

• javascript
• focus
• bootstrap-modal
• autofocus

Share Improve this question Follow asked Oct 26, 2018 at 13:42 MikeMichaelsMikeMichaels 49422 gold badges66 silver badges2727 bronze badges 2

• Instead of using button can't we use anchor tag?w3schools./jsref/tryit.asp?filename=tryjsref_html_blur – Vikram Thakur Commented Oct 26, 2018 at 14:09
• @Vikram Thakur, I would rather not. It would mess with the overall design of the site. – MikeMichaels Commented Oct 26, 2018 at 14:11

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

Focusing on the button is called simultaneously while you pressing the enter key with the input tag. That triggers immediate enter key event on the button.

So that the modal seems not closing. Putting setTimeout will fix it. You may need to style it by using the :focus psedo-class selector to show it like focused.

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>

本文标签： JavascriptFocus on element after closing ModalStack Overflow