Máscara de dinheiro (R$) com jQuery

Rafael Gerônimo

Aprenda a formatar os campos de input para valores monetários utilizando jQuery.

Imagem de capa para Máscara de dinheiro (R$) com jQuery

Rafael Gerônimo

19 setembro, 2017

Há ocasiões em que o desenvolvedor web deverá tratar a forma como os números serão inseridos no input, aplicando uma máscara no campo conforme a informação a ser digitada. Por exemplo, um CNPJ apresentado como 12.906.174/0001-05 fica bem mais atraente do que 12906174000105, não é mesmo?

Para resolver esse tipo de questão utilizando jQuery existem milhares de plugins desenvolvidos pela comunidade. Um deles veio para tratar da máscara do campo quando o assunto é moeda, dinheiro, bufunfa. Veja a seguir como usar o plugin Jquery-maskMoney para representar a entrada em moeda brasileira (Real R$):

Inicialmente, precisamos incluir o jQuery ao nosso head com o seguinte código:

<script
	src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"
	type="text/javascript"
></script>

Em seguida, baixe a versão mais recente do plugin (aqui) e inclua o script à sua página:

<script
	src="jquery.maskMoney.min.js"
	type="text/javascript">
</script>

Agora, basta criar o campo de input que receberá os dados:

<input type="text" id="currency" />

Por fim, a parte mágica, onde adicionamos os parâmetros que definirão o visual do campo, deixando claro que estamos esperando que o campo seja preenchido com o valor monetário brasileiro, o Real (R$).

<script>
  $(function(){
    $('#currency').maskMoney({
      prefix:'R$ ',
      allowNegative: true,
      thousands:'.', decimal:',',
      affixesStay: true});
  })
</script>

prefix:’R$’: – estabelece o prefixo a ser apresentado à esquerda do valor a ser digitado no campo.
allowNegative: true – para permitir valores abaixo de zero.
thousands: ’.’ – define o separador da casa do milhar, nesse caso determinando com o símbolo de ponto (.).
decimal: ’,’ – define o indicador da casa decimal, os centavos no caso, separando com vírgula o valor do restante.
affixesStay: true – essa opção faz com que, ao deixar o foco fora do input, o símbolo da moeda (R$) continue sendo exibido.

Para mais opções, confira essa página: http://plentz.github.io/jquery-maskmoney/

Código completo:

<html>
  <head>
    <meta charset="UTF-8">
    <title>Máscara de Input - Dinheiro</title>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
    <script src="jquery.maskMoney.min.js" type="text/javascript"></script>
  </head>
  <body>
    <input type="text" id="currency" />
  </body>
  <script>
    $(function(){
        $('#currency').maskMoney({prefix:'R$ ', allowNegative: true, thousands:'.', decimal:',', affixesStay: true});
    })
  </script>
</html>

Github do plugin: https://github.com/plentz/jquery-maskmoney

<rafael.geronimo.dev/blog>

Máscara de dinheiro (R$) com jQuery