SweetAlert 2 掩码输入

Question

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

这里是一些代码


    import React, { Component } from 'react';
    import Swal from 'sweetalert2';
    import { Fab } from '@material-ui/core';
    import withReactContent from 'sweetalert2-react-content';


    const reSwal = withReactContent(Swal);

    class NewTask extends Component {


      state = {
        goToProfile: false
      };


      handleNewTask = async () => {

        reSwal.mixin({
          input: 'text',
          confirmButtonText: 'Next →',
          showCancelButton: true,
          progressSteps: ['1', '2']
        }).queue([
          {
            title: 'Age',
            text: 'Your Age'
          },
          {
            title: 'Budget',
            text: 'Your Budget',
            input: 'number',
            inputAttributes: {
              min: 100,
              max: 1000000
            },
          },

        ]).then((result) => {
          if (result.value) {
            reSwal.fire({
              title: 'thank u !',
              confirmButtonText: 'Lovely!'
            })
          }
        })
      }

      render() {

        return (
          
            New
          
        );
      }
    }

    export default NewTask;

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

Answer 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 的掩码插件 (you can see the documentation here) 和 SweetAlert2 中的 onOpen 属性。在 onOpen，您可以传递一个获取 swal 容器的函数，使用 JQuery 通过 id 查找输入，并使用您要求的掩码调用 .mask() 方法。

在Jquery的Mask Plugin官网可以看到更多的mask示例。

下午好！

SweetAlert 2 掩码输入

SweetAlert 2 Mask Input

masking

reactjs

sweetalert2