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

Question

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

P.s我用的是materializecsscss框架，我也看了一篇文章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!'
        })
    }
})

});

Answer 1

问题问题来自 bootstrap 模态可访问性控制代码，可在此处 Modal Accessibility Tab Control 找到，它会在 Bootstrap 模态失去焦点时强制关注另一个元素（在本例中为 SweetAlert 模态）页面。

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

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

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

For Bootstrap 3 将此代码添加到您的 JS

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

Answer 2

正在删除 tabindex

针对这种情况的另一种解决方案是从 bootstrap 模态中删除 tabindex 属性，这将防止 sweetAlert2 模态失去焦点。

Answer 3

对于bootstrap 5,

使用 data-bs-focus="false"

声明您的模态

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

Answer 4

对于 bootstrap@5.1.3 上的某个人运行，我通过在 Modal 对象上将焦点选项设置为 false 解决了这个问题。像

const containerClaimReqModal = document.getElementById("claim-request-detail-modal");
const claimReqModal = new bootstrap.Modal(containerClaimReqModal,{focus:false});

作为文档引用 https://getbootstrap.com/docs/5.0/components/modal/#options

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

Input in sweetalert 2 not typeable or cannot be typed on in materializecss modal

javascript

css

materialize

sweetalert

sweetalert2