javascript - sweetalert 2 中的输入不可输入或无法在 materializecss 模式中输入

Question

我有模式，当我点击添加账单按钮时，它会弹出 sweetalert2，下面提供的代码来自他们的文档，所以我认为代码没有问题，无论如何，我的问题是输入不能通过可以输入，就像禁用一样，这在 materializecss 方面有问题吗？

P.s 我用的是materializecss css框架，我也看过一篇文章，在bootstrap框架中和我有同样的问题。

https://github.com/sweetalert2/sweetalert2/issues/374

    $(".btnAddBills").click(function(event) {  
swal.mixin({
    input: 'text',
    confirmButtonText: 'Next →',
    showCancelButton: true,
    progressSteps: ['1', '2', '3']
}).queue([
{
    title: 'Question 1',
    text: 'Chaining swal2 modals is easy'
},
'Question 2',
'Question 3'
]).then((result) => {
    if (result.value) {
        swal({
            title: 'All done!',
            html:
            'Your answers: <pre><code>' +
            JSON.stringify(result.value) +
            '</code></pre>',
            confirmButtonText: 'Lovely!'
        })
    }
})

});

Answer 1

问题 问题来自引导模式可访问性控制代码，可在此处找到 Modal Accessibility Tab Control , 每当它失去焦点到页面中的另一个元素(在本例中为 SweetAlert Modal)时，它就会强制关注 Bootstrap 模态。

解决方法 就像删除焦点事件一样简单。

对于 Bootstrap 4 将此代码添加到您的 JS

$.fn.modal.Constructor.prototype._enforceFocus = function() {};

对于 Bootstrap 3，将此代码添加到您的 JS

$('#myModal').on('shown.bs.modal', function() {
    $(document).off('focusin.modal');
});