CODEWITHSUNDEEP
reactjsmaskingsweetalert2
Alejandro Arias
Alejandro Arias

Reputation: 307

SweetAlert 2 Mask Input

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

Upvotes: 3

Views: 3009

Answers (2)

Imron Rosadi
Imron Rosadi

Reputation: 91

this one may help you, btw i using maskMoney lib for jquery

inputAttributes: {
    autocapitalize: 'off',
    id: "maskInput",
},
onOpen: function (el) {
    var container = $(el);
    container.find('#maskInput').maskMoney({ thousands:'.', decimal:',', affixesStay: false, precision: 0});
    container.find('#maskInput').keyup(function(e){
        $(this).maskMoney('mask', $(this).val(), { thousands:'.', decimal:',', affixesStay: false, precision: 0});
    });
},

Upvotes: 0

Indira Lima
Indira Lima

Reputation: 366

I know that already passed 3 months, but I hope I can still help you.

I 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:

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

That solution uses the Jquery's Mask Plugin (you can see the documentation here) and the onOpen attribute from SweetAlert2. At 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.

At the Jquery's Mask Plugin official site you can see more examples of masks.

Good afternoon!

Upvotes: 6

Related Questions