Monetary mask with jquery.inputmask

Asked

Viewed 64,617 times

11

How do I create a mask for a monetary value?

I’m wearing this:

$(".ValoresItens").inputmask('R$ 999.999.999,99', { numericInput: true});

was like: R$ ____. ____. _25,00

But I didn’t like these underline, wanted it to be dynamic.

jquery mask

  • you want to remove the _ that? puts the link of the plugin you are using. If that’s what I’m thinking you can exchange the _ by spaces.

  • Just changing the whitespace would not be enough, because there would be a space between the value and the "R$", I am using: jquery.maskedinput-1. 2.2

  • And trade for zero?

  • Dust to be, but I find it more elegant to have nothing, it is ugly for the user to represent a value so R $ 000.000.010,00

  • The treatment of the Ubmit event, is necessary when the option is configured as digits:0, with integer values, without decimal place, although redundant, I only made it work like this.

5 answers

14


If you are using the plugin jquery.inputmask, set the dynamic mask added the thousand and decimal separator options, to remove the underlines swap the placholder for zero.

<html>
<head>
<!-- não esqueça de adicionar os js do jquery e do pluging !-->
<script>
    $(document).ready(function(){
    $("#money").inputmask('decimal', {
                'alias': 'numeric',
                'groupSeparator': ',',
                'autoGroup': true,
                'digits': 2,
                'radixPoint': ".",
                'digitsOptional': false,
                'allowMinus': false,
                'prefix': 'R$ ',
                'placeholder': ''
    });
</script>
</head>
<body>
   <form>
      <input type="text" id="money" /><br>
   </form>
</body>
</html>

  • This worked well, just got weird the decimal scheme, but it’s very good.

  • @Gabrielsantosreis the placheholder you left blank or put zero?

  • @rray, I am facing problems with rounded values, for example: R$ 2.000,00. With this setting the plugin is putting the comma in place of the point. With unfurnished values is ok, for example: R$ 2.500,55

  • @Thiagopereira, I think it’s best to create a new question, remember to put a testable example so more people can solve the problem :)

  • @Rray I left blank anyway.

  • Only works for inputs? I need one of these to work on a td type tag?

Show 1 more comment

13

Hey there, buddy. In your case I would recommend using the plugin Jquery Maskmoney, This little plug already comes in the way to format fields for money according to your needs, plus some pretty cool options. You can access the latest version of this minified plugin clicking here

To format a field with this plugin according to what you are asking for, use this:

$(document).ready(function()
{
     $(".ValoresItens").maskMoney({
         prefix: "R$:",
         decimal: ",",
         thousands: "."
     });
});

This way, your field will have the prefix R$: (cited in the option prefix), decimals will be separated by a comma (option decimal), and thousands will be separated by a point (option thousands).

  • 1

    Boy, if you had a version of this plugin without Jquery it would be great.

6

With the jQuery Mask Plugin just use the following:

  $('.money').mask('#.##0,00', {reverse: true});

I believe this plugin is better than jquery.inputmask

  • use this plugin not only for money, for weight, height, etc, is very good!

  • Excellent indeed. I think what I use most is for phone and Cpf

2

I just used this configuration and it worked, this setting is for R$:

<html>
<head>
<!-- não esqueça de adicionar os js do jquery e do pluging !-->
<script>
    $(document).ready(function(){
    $("#money").inputmask( 'currency',{"autoUnmask": true,
            radixPoint:",",
            groupSeparator: ".",
            allowMinus: false,
            prefix: 'R$ ',            
            digits: 2,
            digitsOptional: false,
            rightAlign: true,
            unmaskAsNumber: true
    });
</script>
</head>
<body>
   <form>
      <input type="text" id="money" /><br>
   </form>
</body>
</html>

0

     // prepara o input com a mascara
     jQuery(function ($) {
        $("#money").inputmask( 'currency',{"autoUnmask": true,
                    radixPoint:",",
                    groupSeparator: ".",
                    allowMinus: false,
                    prefix: 'R$ ',            
                    digits: 0,
                    digitsOptional: false,
                    rightAlign: true,
                    unmaskAsNumber: true,
                    removeMaskOnSubmit: true
        });
     });

    // retira a mascara do campo
    $(document).on("submit", function () {
        $("#money").inputmask('unmaskedvalue');
    });

See my solution to the question, thank you!!

  • In [en.so] you must publish in Portuguese. If you edit to translate, take the opportunity to add a description of how you solved it, and especially how your solution is different from the others already present in the topic.

  • 1

    Why you need to treat the event submit to remove the mask if you are using the option removeMaskOnSubmit: true?

Browser other questions tagged jquery mask

You are not signed in. Login or sign up in order to post.