Автофокус возвращается к старому окну после закрытия модального окна

Прошу прощения, если это дубликат, но я ничего не могу найти на нем.

Я новичок в Javascript и все еще пытаюсь понять слушателей событий и то, как работает код.

Кроме того, у меня есть модальное окно начальной загрузки, которое появляется, когда число вводится в поле ввода и публикуется.

В этом поле ввода есть автофокус до появления модального окна.

Я нашел здесь помощь о том, как установить автофокус на кнопку в модальном окне, и он отлично работает, вот так:

$('.modal').on('shown.bs.modal', function() {
  $(this).find('[autofocus]').focus();
});

Моя проблема в том, что когда это модальное окно закрыто, я не могу вернуть автофокус обратно в поле ввода.

Я пробовал разные версии, это две мои основные идеи:

$("#no").click(function() {
  $(this).find('[autofocus]').focus();
});

$("#no").click(function() {
  $("staffID").focus();
});

Где StaffID - это идентификатор поля ввода.

Но это не возвращает фокус обратно на поле ввода. #No id - это идентификатор модального окна, поэтому, если вы нажмете нет, вы хотите, чтобы исходный сайт вернулся с фокусом на вводе.

Может ли кто-нибудь указать мне правильное направление?

Также был запрошен HTML, вот он (не обращайте внимания на исландские слова):

<!--CLOCKIN INPUT FORM-->
<form id="staffIdForm" method="post" action="" class="clockin-form">
      <input id="staffID" type="text" name="starfsmannanumer" class="clockin-box" placeholder="Starfsmannanúmer" autofocus/>
      <button id="clockIn" type="button" class="btn btn-success">Stimpla</button>
</form>

<!-- WELCOME MODAL -->
<div class="modal fade" id="welcome-modal" role="dialog" aria-labelledby="welcomeModalLabel" aria-hidden="true">
     <div class="modal-dialog" role="document">
           <div class="modal-content">
                 <div class="modal-header">
                      <h5 class="modal-title" id="welcomeModalLabel">
                          Góðan daginn <span id="nafn"></span>
                      </h5>
                      <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                          <span aria-hidden="true">&times;</span>
                      </button>
                 </div>
                 <div class="modal-body">
                     <p>Innstimplun skráð <span id="time"></span> þann <span id="date"></span></p>
                     <p>Viltu skrá þig í hádegismat?</p>
                 </div>
                 <div class="modal-footer">
                     <button id="no" type="button" class="btn btn-secondary" data-dismiss="modal" autofocus>Nei</button>
                     <button id="yes" type="button" class="btn btn-success">Já</button>
                 </div>
            </div>
      </div>
</div>

Для запуска проблемы необходим следующий javascript:

$("#clockIn").off('click').on('click', function () {
     $("#staffIdForm").submit();
});


$(function getEmployee() {
$("#staffIdForm").on('submit', function(e) {

    var staffId = (document.getElementById("staffID").value);
    console.log(staffId);
    $.post("Attendance/Home/ClockIn", { starfsmannanumer: staffId }, function(data, status) {
        console.log(data);
        $("#nafn").text(data.name);
        $("#clock-out-nafn").text(data.name);


        $(function () {
            //Display time in message
            var dt = new Date();
            document.getElementById("time").innerHTML = dt.toLocaleTimeString('en-GB');
            document.getElementById("clock-out-time").innerHTML = dt.toLocaleTimeString('en-GB');

            //Date message with Icelandic names
            var monthNames = [
                "jan&#250;ar", "febr&#250;ar", "mars", "apr&#237;l", "ma&#237;", "j&#250;n&#237;",
                "j&#250;l&#237;", "&#225;g&#250;st", "september", "okt&#243;ber", "n&#243;vember", "desember"]
            var day = dt.getDate();
            var monthIndex = dt.getMonth();
            document.getElementById("date").innerHTML = day + ". " + monthNames[monthIndex];;
            document.getElementById("clock-out-date").innerHTML = day + ". " + monthNames[monthIndex];;


            //Either check in or out message or error
            if (data.userId == "-1") {
                $("#invalid-staff-id").fadeIn('slow', function () {
                    $("#invalid-staff-id").delay(2000).fadeOut();
                });
            }
            else if (data.timeIn != null && data.timeOut == null) {
                $("#welcome-modal").stop(true).modal('show');
            }
            else if (data.timeIn != null && data.timeOut != null) {
                $("#clock-out-message").fadeIn('slow', function() {
                    $("#clock-out-message").delay(5000).fadeOut();
                    //TODO: L�ta �tstimplunarskilabo� hverfa ef �tt er � takka
                    //TODO: Autofocus � 'Nei' takkann
                });
            }
        })
        document.getElementById("staffID").value = "";
    });

    e.preventDefault();
});
});

$('#welcome-modal').on('shown.bs.modal', function () {
    $(this).find('[autofocus]').focus();
});

$('#welcome-modal').on('hidden.bs.modal', function () {
    $("staffID").focus();
});

Думаю, это все, что нужно.


person Miss Ravenbell    schedule 28.02.2019    source источник
comment
Можем ли мы увидеть и ваш HTML-код? Рабочий пример может помочь продемонстрировать вашу проблему.   -  person showdev    schedule 01.03.2019
comment
Я также заметил, что staffID не является подходящим селектором идентификатора. Возможно, это должно быть #staffID.   -  person showdev    schedule 01.03.2019
comment
Просто добавил HTML и JavaScript, что стало проблемой.   -  person Miss Ravenbell    schedule 01.03.2019
comment
Ух ты, забыл поставить, столько раз менял. Спасибо, что заметили, теперь он работает!   -  person Miss Ravenbell    schedule 01.03.2019


Ответы (1)


Привязать фокус ввода к модальному закрытию. Рабочее решение будет:

$('#myModal').on('hidden.bs.modal', function () {
  $('#myInput').focus();
});

Также обратите внимание, что здесь:

$("#no").click(function() {
  $(this).find('[autofocus]').focus();
});

this - это элемент, на который вы нажали - кажется, неверно попробуйте найти внутри него какой-либо другой элемент DOM

person IP_    schedule 28.02.2019
comment
Спасибо за подсказку, звучит логично. Почему-то мне это не помогает. Хотя, возможно, я делаю весь JavaScript неправильно ... - person Miss Ravenbell; 01.03.2019
comment
МОЯ ВИНА. Как и @showdev, отмеченный здесь выше, я забыл # при обращении к идентификатору. Это решило мою проблему. Большое тебе спасибо! - person Miss Ravenbell; 01.03.2019