SweetAlert 2 掩码输入答案

【问题标题】：SweetAlert 2 Mask InputSweetAlert 2 掩码输入
【发布时间】：2019-12-10 16:38:18
【问题描述】：

我正在使用 Sweet Alert2 (https://sweetalert2.github.io/) -react 组件，我需要在第二步使用（千分隔符和前缀 =“$”）屏蔽输入，这可能吗？

这里有一些代码

从'react'导入反应，{组件}；从“sweetalert2”导入 Swal；从“@material-ui/core”导入{ Fab}；从 'sweetalert2-react-content' 导入 withReactContent； const reSwal = withReactContent(Swal); 类 NewTask 扩展组件 { 状态 = { goToProfile: 假 }; 处理新任务 = 异步（） => { reSwal.mixin({ 输入文本'， confirmButtonText: '下一个 →', 显示取消按钮：真， progressSteps: ['1', '2'] }）。队列（[ { 标题：“年龄”，文字：“你的年龄” }, { 标题：“预算”， text: '你的预算', 输入：'数字'，输入属性：{ 分钟：100，最大：1000000 }, }, ]).then((结果) => { 如果（结果。值）{ reSwal.fire({ 标题：'谢谢你！'， confirmButtonText: '可爱！' }) } }) } 使成为（） { 返回（新的 ); } } 导出默认NewTask；

我不知道如何控制。感谢您的帮助

【问题讨论】：

标签： reactjs masking sweetalert2

【解决方案1】：

我知道已经过去了 3 个月，但我希望我仍然可以帮助你。

我刚刚遇到这个问题，google了一下没有得到任何解决方案，所以我用这个方法来实现我想要的：

swal.fire({
    text: 'myText',
    input: 'text',
    inputAttributes: {
        id: 'myInput'
    },
    onOpen: function(el) {
        var container = $(el);
        container.find('#myInput').mask('$ 0000.00');
    }

该解决方案使用 Jquery 的 Mask 插件 (you can see the documentation here) 和 SweetAlert2 中的 onOpen 属性。在onOpen，您可以传递一个获取swal 容器的函数，使用JQuery 通过id 查找输入，并使用您要求的掩码调用.mask() 方法。

在 Jquery 的 Mask Plugin 官方网站上，您可以看到更多的掩码示例。

下午好！

【讨论】：

请告诉我结果！