Как установить автофокус на кнопку внутри модального окна каждый раз, когда появляется модал?

Question

Я использую Vue.js 2, чтобы показать модал Bootstrap. Ниже приведен пример.

<div class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" autofocus class="btn btn-primary">Always focus</button>
            </div>
        </div>
    </div>
</div>

Идея состоит в том, что когда модальное всплывающее окно, пользователь должен иметь возможность нажать клавишу Enter, чтобы нажать кнопку Always focus без использования мыши. И когда пользователь нажимает кнопку со стрелкой left или right, фокус переключается с кнопки Always focus на кнопку Close и наоборот.

С атрибутом autofocus работает хорошо, нотолько если модал появляется в первый раз. Во второй раз, когда модал всплывает, кнопка Always focus теряет фокус.

Как сделать так, чтобы кнопка Always focus всегда имела фокус при каждом всплывающем модале? Или Как я могу реализовать идею, используя какое-либо CSS-решение, JavaScript-решение или Vue-решение?

Обратите внимание, что я использую Vue.js 2. Любое решение Vue.js также приветствуется, но не jQuery.

Answer 1

Вы можете сделать это, используя объект Vue $refs. ( см. Документы ) По сути, вы даете кнопке атрибут ref, тогда вы всегда можете получить доступ к этому элементу в вашем коде Vue, вызвав this.$refs.<whatever name you gave it>:

<div class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button ref="always_focus" type="button" autofocus class="btn btn-primary">Always focus</button>
            </div>
        </div>
    </div>
</div>

Затем,добавьте или измените ваш show обработчик событий для модального режима:

export default {
  ...
  methods: {
    onModalShow() {
      this.$nextTick(() => {
        this.$refs.always_focus.focus();
      });
    }
  },
  ...
}

Использование функции Vue $nextTick() ( docs ) здесь также важно. Вам нужно подождать, пока кнопка станет видимой, чтобы сфокусировать ее. Добавив код фокуса к обратному вызову $nextTick(), вы можете быть уверены, что DOM завершил обновление с предыдущего изменения вашей модели данных (например, изменение, которое показывает модальное состояние).

ПРИМЕЧАНИЕ: Выше приведен только пример, так как я не знаю точно, как выглядит ваш модальный код.

Answer 2

Вы можете использовать «установленную» функцию, чтобы всегда фокусировать кнопку, когда модальное окно открыто:

mounted: function() {
  document.getElementById("focus-button").focus();
}

Или вы можете прослушивать нажатие клавиши и проверять, является ли она клавишей ввода, и программнонажмите кнопку.

onKeyPress: function(e) {
  if (e.which == 13) {
    document.getElementById("focus-button").click();
  }
}