sweet alert2: как получить автофокус на входе?

Question

с использованием sweetalert2 @ 8

Использование сладкого оповещения для окна поиска с кодом ниже. Автофокус работает на Chrome, но не на Safari и Firefox. Как мы можем это исправить?

swal.fire({
    // title: "Search",
    type: "question",
    html: '<form id="searchForm" method="post" action="/search">' +
        "<input type='hidden' />" +
        '<input autofocus class="form-control" type="text" name="search_box" placeholder="Seach..."></form>',
    confirmButtonText: "Search",
    showLoaderOnConfirm: true,
    preConfirm: function (value) {
        document.getElementById("searchForm").submit();
        return new Promise(resolve => {
        })
    },
});

Answer 1

Я предлагаю добавить код JavaScript в polyfill недостающую функциональность, которую вы не получаете в других браузерах.Sweetalert2 также имеет страницу совместимости браузера здесь , которая говорит, что она совместима со всеми основными браузерами.Но также предложите использовать следующий тег сценария для импорта необходимого полизаполнения.

<!-- Include a polyfill for ES6 Promises (optional) for IE11 -->
<script src="https://cdn.jsdelivr.net/npm/promise-polyfill@8/dist/polyfill.js"></script>

Что касается атрибута autofocus , он также поддерживается всеми основными браузерами в соответствии с MDN.Вы можете попытаться использовать событие JavaScript при срабатывании предупреждения, которое устанавливает свойство автофокуса.

document.getElementById('myInput').autofocus = true;

Вы также можете попробовать самому заполнить свойство автофокуса с помощью этого примера здесь .

Answer 2

Другой вариант здесь - использовать собственный метод .focus() для ввода внутри параметра onOpen SweetAlert2:

Swal.fire({
  ...
  onOpen: () => {
    Swal.getContent().querySelector('.custom-input').focus()
  }
})