Fale comigo!

Criando Máscaras para moedas com JQuery

Desenvolvimento Frontend Formatar Valor Monetário Input de Moeda JavaScript JQuery MaskMoney Plugin Máscara de Moeda JQuery

Criando Máscaras para moedas com JQuery

Criando Máscaras para moedas com JQuery

Esse plugin foi desenvolvido baseado no original “Masked Input Plugin“. Com esse plugin fica super fácil criar máscaras para moedas.

Como utilizar:

Primeiramente você precisa chamar os arquivos jquery.min.js e jquery.maskMoney.js

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

Depois você insere o código que formata os campos

<script type="text/javascript">
    $(function(){
        $("#valor").maskMoney();
    })
</script>

Vale lembrar que o #valor deve corresponder ao id do campo, ex:

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

Para formatação em R$, utilize o seguinte script

<script type="text/javascript">
$(function(){
  $("#demo4").maskMoney({symbol:'R$ ', 
showSymbol:true, thousands:'.', decimal:',', symbolStay: true});
 })
</script>

Visite o site do Plugin MaskMoney

Veja alguns exemplos de máscaras

Veja também alguns valores da configuração padrão do maskMoney

  • symbol: o símbolo a ser usado antes de os valores do usuário. padrão: ‘EUA $’
  • showSymbol: definir se o símbolo deve ser exibido ou não. padrão: false
  • symbolStay: definir se o símbolo vai ficar no campo após o usuário existir no campo. padrão: false
  • thousands: o separador de milhares. padrão: ‘,’
  • decimal: o separador de decimal. padrão: ‘.’
  • precision: quantas casas decimais são permitidos. default: 2
  • defaultZero: quando o usuário entra em campo, ele define uma máscara padrão usando zero. default: true
  • allowZero: use esta configuração para impedir que os usuários entrem com zero. padrão: false
  • allowNegative: use esta configuração para impedir que os usuários entrem com valores negativos. padrão: false
{
symbol:'US$', // Simbolo
decimal:'.', // Separador do decimal
precision:2, // Precisão
thousands:',', // Separador para os milhares
allowZero:false, // Permite que o digito 0 seja o primeiro caractere
showSymbol:false // Exibe/Oculta o símbolo
}

Loading

Publicação Criada em: janeiro 31, 2013
Atualizado em: março 18, 2025 8:21 pm

Posts relacionados

17 comentários em “Criando Máscaras para moedas com JQuery”

  2. Cássia

    Segui os passos e funcionou, porém, este script entrou em conflito com um de data que uso Datepicker, parou de funcionar. O script que estiver declarado depois que funciona. Sabe o motivo?

    $(function() {
    $.datepicker.setDefaults( $.datepicker.regional[ “” ] );
    $( “#datepicker” ).datepicker( $.datepicker.regional[ “pt-BR” ] );
    });

    $(function(){
    $(“#valor”).maskMoney({symbol:’R$ ‘, showSymbol:true, thousands:’.’, decimal:’,’, symbolStay: true});
    });

    1. admin

      Olá Cássia,
      Provavelmente algum conflito entre funções.
      Tentou inverter a ordem para ver se funciona? Veja também quantos jQuery estão sendo solicitado (as vezes o outro script também pede um jQuery ficando em duplicidade).

  3. Henrique

    Tem como aplicar a máscara diretamente na variável? e não no campo input? Quero imprimir dinamicamente valores no campo e quero que venha preenchido com a máscara. Como faço?

  5. Juliano Henrique Diniz

    Perdão. desconsidere meu comentário que acabei de fazer.
    Estou com duas guias abertas, uma sobre mascaras de telefone e uma de mascaras de moedas.
    Troquei as páginas na hora de enviar a pergunta.
    Desculpe-me!
    E aproveitando, usei a sua mascara de moedas. Funcionou certinho! Parabéns!

  7. Rodrigo Magalhaes

    Muito Obrigado, funcionou perfeitamente.

    Para quem usa mais de duas bibliotecas jQuery, ou mais de uma versão e está dando conflito,
    usem o noConflict(); Foi assim que fiz, e deu tudo certo ;D

  8. Aloisio Junior

    Fábio, parabéns pelo post, mas fiquei com uma dúvida. O campo que receberá essa informação no mysql deverá estar com que Type?
    Gostaria de buscar esses valores e realizar operações.
    Obrigado!

Deixe um comentário