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
}