13

Como faço para criar uma mascara par um valor monetário?

Estou usando esse:

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

ficou assim: R$ ____.____._25,00

Mas eu não gostei desses underline, queria que fosse dinâmico.

5
  • vc quer remover os _ isso? coloca o link do plugin que está usando. Se for o que eu estou pensando vc pode trocar os _ por espaços.
    – rray
    Commented 13/07/2016 às 16:02
  • Só trocar os espaços em branco não seria o suficiente, pois ficaria uma espaço entre o valor e o "R$", estou usando: jquery.maskedinput-1.2.2 Commented 19/07/2016 às 19:33
  • E trocar por zero?
    – rray
    Commented 19/07/2016 às 19:35
  • Pó de ser, mas acho mais elegante não ter nada, fica feio para o usuário a representar um valor assim R$000.000.010,00 Commented 15/08/2016 às 11:35
  • O tratamento do evento submit, se faz necessário quando a opção está configurada como digits:0, com valores inteiros, sem a casa decimal, apesar de redundante, somente fiz funcionar assim. Commented 18/09/2019 às 20:50

5 Respostas 5

14

Se estiver usando o plugin jquery.inputmask, definir a mascara dinâmica adicionado as opções de separador de milhar e decimais, para remover os underlines troque o placholder por 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>
6
  • Esse funcionou bem, só ficou estranho o esquema do decimal, mas tá muito bom. Commented 13/07/2016 às 17:00
  • @GabrielSantosReis o placheholder vc deixou em branco ou colocou zero?
    – rray
    Commented 13/07/2016 às 17:26
  • @rray, estou enfrentando problemas com valores arredondados, por ex: R$ 2.000,00. Com essa configuração o plugin está colocando a virgula no lugar do ponto. Com valores não arredondados está ok, por ex: R$ 2.500,55 Commented 13/10/2016 às 18:27
  • @ThiagoPereira, acho melhor criar uma nova pergunta, lembre de colocar um exemplo testavel assim mais pessoas podem resolver o problema :)
    – rray
    Commented 13/10/2016 às 18:30
  • @rray deixei em branco mesmo. Commented 4/05/2017 às 18:38
13

Olá, companheiro. No seu caso eu recomendaria o uso do plugin Jquery Maskmoney, Esse pluginzinho já vem no jeito para formatar campos para dinheiro de acordo com suas necessidades, além de algumas opções bem legais. Você pode acessar a última versão desse plugin minificada clicando aqui

Para formatar um campo com esse plugin de acordo com o que está pedindo, use isso:

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

Dessa maneira, o seu campo terá o prefixo R$: (citado na opção prefix), os decimais serão separados por uma vírgula (opção decimal), e os milhares serão separados por um ponto (opção thousands).

1
  • 1
    Rapaz, se tivesse uma versão desse plugin sem JQuery seria formidável. Commented 5/11/2018 às 17:42
6

Com o jQuery Mask Plugin basta utilizar o seguinte:

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

Acredito que este plugin seja melhor que o jquery.inputmask

2
  • uso esse plugin não só pra dinheiro, como pra peso, altura, etc, é muito bom! Commented 6/06/2020 às 15:36
  • Excelente mesmo. Acho que o que eu mais uso é pra telefone e cpf Commented 8/06/2020 às 13:37
3

Acabei de utilizar esta configuração e deu certo, esta configuração é para 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');
    });

Veja a minha solução para a questão, obrigado!!

2
  • No Stack Overflow em Português você deve publicar em português. Se for editar para traduzir, aproveite para adicionar uma descrição de como resolveu e, principalmente, como a sua solução é diferente das outras já presentes no tópico.
    – Woss
    Commented 18/09/2019 às 20:14
  • 1
    Por que precisa tratar o evento submit para remover a máscara se você está utilizando a opção removeMaskOnSubmit: true?
    – Woss
    Commented 18/09/2019 às 20:26

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .