Criando Máscaras para moedas com 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 exibida ou não. padrão: false
  • symbolStay: definir se o símbolo vai ficar no campo após o usuário existe 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 entrando com zero. padrão: false
  • allowNegative: use esta configuração para impedir que os usuários entrando 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
}

 2,265 Total Visualizações,  1 Visualizações Hoje

17 comentários

  1. 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. 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).

  2. 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?

  3. Quando aplico a mascara no telefone de 9 dígitos, ele fica assim (99)9999-99999. Como faço para ficar assim: (99) 99999-9999? com 5 dígitos antes do – e 4 depois.

  4. 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!

  5. 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

  6. 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 uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

Esse site utiliza o Akismet para reduzir spam. Aprenda como seus dados de comentários são processados.