Javascript - Фокус на элемент после закрытия модального - PullRequest
Новая
       37

Javascript - Фокус на элемент после закрытия модального

0 голосов
/ 26 октября 2018

У меня есть кнопка с атрибутом автофокуса. Когда пользователь нажимает кнопку (или нажимает «клавишу ввода», так как она имеет автофокус), появляется модальное окно. Этот модал также имеет поле ввода с атрибутом autofocus. После того, как пользователь что-то введет и нажмет «клавишу ввода», модальное окно будет закрыто.

Я бы хотел снова сфокусировать начальную кнопку после закрытия модального окна. Но я не могу заставить его работать.

Я попытался добавить атрибут 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>

1 Ответ

0 голосов
/ 26 октября 2018

Фокусировка на кнопке вызывается одновременно, пока вы нажимаете клавишу ввода с тегом ввода. Это вызывает немедленное нажатие клавиши на кнопке.

Так что модал кажется не закрывающимся. Установка setTimeout исправит это. Возможно, вам придется стилизовать его, используя селектор пседо-класса :focus, чтобы показать его как сфокусированный. 

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>
...