sweetalert 2 中的输入不可输入或无法在 materializecss 模式中输入答案

【问题标题】：Input in sweetalert 2 not typeable or cannot be typed on in materializecss modalsweetalert 2 中的输入不可输入或无法在 materializecss 模式中输入
【发布时间】：2018-08-12 04:04:43
【问题描述】：

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

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

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

    $(".btnAddBills").click(function(event) {  
swal.mixin({
    input: 'text',
    confirmButtonText: 'Next &rarr;',
    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!'
        })
    }
})

});

【问题讨论】：

标签： javascript css materialize sweetalert sweetalert2

【解决方案1】：

问题问题来自引导模式可访问性控制代码，可以在此处找到Modal Accessibility Tab Control，只要它失去对页面中另一个元素（在本例中为 SweetAlert 模式）的焦点，它就会强制关注引导模式。

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

对于引导程序 4 将此代码添加到您的 JS 中

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

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

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

【讨论】：

【解决方案2】：

移除 tabindex

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

【讨论】：

【解决方案3】：

对于引导程序 5，

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

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

【讨论】：