in Desenvolvimento WEB, Frameworks, jQuery, Plugins

MaskInputMoney – Máscara para campos de moeda

O plugin Mask Input Money do jQuery foi desenvolvido para fornecer uma máscara específica para moedas, sendo possível definir o símbolo (R$, US$, $, etc), número de casas, entre outras opções.

Para utilização de máscara de forma mais genérica, verifique o post sobre Masked Input Plugin – Máscara para campos de texto.

O plugin deve “atacar” o input em questão e aceita os seguintes parâmetros:

  thousands
  decimal
  allowZero
  allowNegative
  defaultZero
  symbol
  showSymbol
  symbolStay
  precision

thousands

Aceita um caractér (CHAR) como valor e o define como o símbolo para milhares. Padrão: ",".

decimal

Aceita um caractér (CHAR) como valor e o define como o símbolo para decimal. Padrão: ".".

allowZero

Aceita um true ou false (BOOLEAN) como valor e define se o campo vai aceitar zeros (true) ou não (false).  Padrão: "false".

allowNegative

Aceita um true ou false (BOOLEAN) como valor e define se o campo vai aceitar um valor negativo (true) ou não (false). Padrão: "false".

defaultZero

Aceita true ou false (BOOLEAN) como valor e define se o campo vai aparecer com os valores zerados na inicialização (ao receber focus). Padrão "true".

symbol

Aceita uma string como valor e define o símbolo da moeda. Padrão: "US$"

showSymbol

Aceita true ou false (BOOLEAN) como valor e define se o campo deverá mostrar o símbolo (true) ou não (false). Padrão? "false".

symbolStay

Aceita true ou false (BOOLEAN) como valor e define se o campo deverá permanecer mostrando o símbolo quando perder o foco (evento blur, change, etc). Padrão: "false".

precision

Aceita um inteiro (INT) como valor e define quantas casas decimais o valor poderá conter. Padrão: "2".

Carregando o arquivo

Como premissa, devemos ter carregado o jQuery e em, seguida podemos carregar o arquivo do plugin, diretamente do nosso servidor (fazendo o download do arquivo) ou então do Github.

<head>
 ...
 <script src="//raw.github.com/plentz/jquery-maskmoney/master/jquery.maskMoney.js" type="text/javascript"></script>
 ...
</head>

Exemplos de utilização

HTML: supomos que temos um campo de texto com o ID “GRANA”.

...
<input type="text" name="dinheiro" id="GRANA" />
...

JS (jQuery): utilizamos o seguinte código para atribuir uma máscara de REAL (R$) à esse campo.

$("#GRANA").maskMoney({thousands:".", decimal:",", symbol:"R$", showSymbol:true, symbolStay:true});

Vídeo-aula

Nesse vídeo você encontrará mais explicações e verá os exemplos em funcionamento.

Download

https://github.com/plentz/jquery-maskmoney/downloads

Link do projeto 

https://github.com/plentz/jquery-maskmoney

Write a Comment

Comment

*

Este site utiliza o Akismet para reduzir spam. Fica a saber como são processados os dados dos comentários.

  1. Boa Noite……gostei muito do tópico….Parabéns.

    Tenho uma duvida usando o maskMoney.
    Tenho 3 inputs……sendo um (quantidade) ,(valor) e (total) onde o input total recebera o calculo da quantidade vezes o valor e o campo total deverá receber a mascara (R$ 999,99) porem este campo e desabilitado e a mascara só é ativada quando o campo recebe ação. Como fazer para o campo desabilitado receber uma mascara?

    • Oi Nelson, tranquilo?
      Estive um pouco ausente e pelo tempo é provável que tu já tenhas resolvido, mas vamos lá. Tudo depende de onde tu vais colocar a máscara, se estiver no onload, ele vai carregar independentemente se o campo está habilitado ou não. E o controle para habilitar o campo tu faz normalmente com um IF. Ajudei? Obrigado por visitar o blog e espero ter te ajudado. Abraço!!