Sweetalert 2 中的输入不可输入或无法在 materializecss 模式中输入

Question

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

Ps我正在使用一个materializecss css框架，我还阅读了一篇文章，它在引导框架中与我有同样的问题。

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

对于引导程序 5，

声明你的模式data-bs-focus="false"

<div class="modal fade" id="global_modal_fullscreen" data-bs-focus="false" aria-hidden="true" tabindex="-1">
...

Answer 2

问题 问题来自引导模式可访问性控制代码，可以在此处找到模态可访问性选项卡控件，它会在页面中的另一个元素（在本例中为 SweetAlert Modal）失去焦点时强制关注引导模式。

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

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

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

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

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

Answer 3

删除选项卡索引

这种情况的另一个解决方案是从引导模式中删除该tabindex属性，这将防止 sweetAlert2 模式失去焦点。