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.
1 2 3 4 5 | <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”.
1 2 3 | ...<input type="text" name="dinheiro" id="GRANA" />... |
JS (jQuery): utilizamos o seguinte código para atribuir uma máscara de REAL (R$) à esse campo.
1 | $("#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
Muito bom o conteúdo, parabéns!
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!!