甜蜜警报2：如何在输入上自动对焦？

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 代码来填充您在其他浏览器中没有的缺失功能。 Sweetalert2 这里还有一个浏览器兼容性页面，上面说它兼容所有主要浏览器。 但也建议使用以下脚本标签来导入所需的 polyfill。

<!-- 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 ，所有主要浏览器也支持它。 您可以尝试在触发设置 autofocus 属性的警报时使用 JavaScript 事件。

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

您还可以尝试在此处使用此示例对 autofocus 属性本身进行 polyfill。

Answer 2

这里的另一个选择是对.focus() didOpen参数内的输入使用原生的.focus()方法：

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