SweetAlert 2 掩码输入

Posted 2023-02-22

【中文标题】SweetAlert 2 掩码输入

【英文标题】：SweetAlert 2 Mask Input

【发布时间】：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；

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

【参考方案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 官方网站上，您可以看到更多的掩码示例。

下午好！

【讨论】：

请告诉我结果！