SweetAlert 2 Mask Input

Ask Time：2019-08-02T12:20:09 Author：Alejandro Arias

I'm using Sweet Alert2 (https://sweetalert2.github.io/) -react component and I need on second step mask the input with (thousand separator and prefix="$") it's possible?

Here some code


    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;

I don't know how to control this. Thank for your help

Author:Alejandro Arias，eproduced under the CC 4.0 BY-SA copyright license with a link to the original source and this disclaimer.
Link to original article：https://stackoverflow.com/questions/57319900/sweetalert-2-mask-input

Dahan Schuster :

I know that already passed 3 months, but I hope I can still help you.\n\nI got this problem just now and googled for answers but didn't get any solution, so I used this method to achieve what I wanted:\n\nswal.fire({\n text: 'myText',\n input: 'text',\n inputAttributes: {\n id: 'myInput'\n },\n onOpen: function(el) {\n var container = $(el);\n container.find('#myInput').mask('$ 0000.00');\n }\n\n\nThat solution uses the Jquery's Mask Plugin (you can see the documentation here) and the onOpen attribute from SweetAlert2.\nAt onOpen, you can pass a function that gets the swal container, finds the input by id with JQuery and calls the .mask() method with the mask you asked for.\n\nAt the Jquery's Mask Plugin official site you can see more examples of masks.\n\nGood afternoon!",

2019-11-02T19:42:49

SweetAlert 2 Mask Input