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

问题 问题来自引导模式可访问性控制代码，可以在此处找到模式可访问性选项卡控件，每当它失去焦点到页面中的另一个元素（在本例中为 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 2

对于引导程序 5，

用

data-bs-focus="false"

声明你的模态

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

Answer 3

删除选项卡索引

这种情况的另一个解决方案是从引导模式中删除

tabindex

属性，这将防止 sweetAlert2 模式失去焦点。

Answer 4

对于在 [email protected] 上运行的人，我通过在 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

Answer 5

在引导程序 4 中：

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

Answer 6

在 React 的 Material-UI Dawer 中遇到了 SweetAlert2 无法输入的问题？这是一个修复：

问题出在MUI Drawer/Modal Focus管理上。要解决此问题，请使用抽屉/模式的disableEnforceFocus属性。当设置为 true 时，它会让抽屉失去焦点，从而使输入成为可能。

但是请注意，这可能会影响屏幕阅读器的可访问性。深思熟虑地继续。

这是代码片段-

<Drawer id="drawer" anchor="right" open={true} **disableEnforceFocus**
}}>
    {
    <MyComponent/>//Inside this component i have sweetalert
    }
</Drawer>

我希望相同的属性能够解决 MUI Modal 的问题。