Máscara para campos monetários com jquery + maskMoney

Fala pessoal, quanto tempo hein?

Pois é. O tempo anda meio corrido e está me faltando tempo para escrever conteúdo novo aqui no blog. Felizmente hoje consegui uma “brecha” para trazer uma dica super interessante para quem precisa utilizar em sites ou sistemas campos html para valores monetários. É ótimo para quem trabalha com e-commerce, vendas coletivas, sistemas de gestão e etc.

Trata-se do plugin maskMoney.js, baseado em jquery e que ajuda a formatar uma máscara para campos monetários. Vocês verão como é simples utilizar.

Antes de começar gostaria de alertar sobre um possível problema que poderá ocorrer caso exista no projeto também a utilização do maskedinupt , que é um plugin para formatação de diversos tipos de máscaras(Escrevi a respeito desse plugin aqui). O problema é que tanto no maskMoney quanto no maskdeinput existe uma função chamada mask(). Logo isso gera um conflito quando for utilizado os dois plugins no mesmo documento.

A solução para esse problema é alterar o nome da função mask() no maskMoney.js para outro nome de sua preferência (Ex: maskAppend()). Para isso basta alterar as linhas 238, 272, 290 e 291 do arquivo, substituindo o mask() por maskAppend().

Agora sim, vamos lá. Primeiramente faça o download do jquery e do maskMoney (já disponibilizo o arquivo com o nome da função substituido).

Vamos ao exemplo:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Máscara para campos monetários com jquery + maskMoney</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="jquery.js" ></script>
    <script type="text/javascript" src="jquery.maskMoney.js" ></script>
    <script type="text/javascript">
        $(document).ready(function(){
              $("input.dinheiro").maskMoney({showSymbol:true, symbol:"R$", decimal:",", thousands:"."});
        });
    </script>
</head>
<body>
     <h1>Máscara para campos monetários com jquery + maskMoney</h1>
     <form>
            Valor: <input type="text" name="exemplo1" class="dinheiro" />
     </form>
</body>
</html>

A chamada é simples (linhas 9 a 11). Basta informar o id ou class do(s) campo(s) que deverão ser do tipo valor monetário.

Aí definimos alguns parâmetros como:

  • showSymbol: deverá mostrar o símbolo monetário? (Padrão: false)
  • symbol: qual o símbolo? (US$, R$, etc) (Padrão: US$)
  • decimal: qual sinal para decimal? ( Nos EUA é ponto(.) e no Brasil é vírgula(,) )
  • thousands: qual sinal para casa de milhar? (Nos EUA é vírgula(,) e no Brasil é ponto(.))
  • precision: qual o nível de precisão? (Padrão: 2)
  • defaultZero: 0 por padrão (true ou false) (Padrão: true)
  • allowZero: permitir 0 (Padrão: false)
  • allowNegative: permitir valores negativos (Padrão: false)

E pronto! Já está funcionando sua máscara.

Qualquer dúvida deixe um comentário.

Abs!

Siga-me no twitter: @rafaelwendel

É formado em Sistemas de Informação, pós-graduado em Sistemas de Banco de Dados e mestre em Educação com foco em Tecnologias Sociocomunitárias. Trabalha como professor de ensino técnico e tecnológico no Instituto Federal de Educação, Ciência e Tecnologia de São Paulo ministrando disciplinas nas áreas de programação, banco de dados, desenvolvimento de projetos e engenharia de software.

Posts relacionados

Nenhum post relacionado

Comentários

  7. Olá,
    Eu testei com o PrimeFaces 3.4 e JSF 2 e funcionou perfeitamente.
    O unico problema que tive foi por que o primefaces já possui o JQuery entao nao removi a linha
    No Mais funciona perfeitamente.

    Obrigado.

    Responder

  8. Olá,
    Eu testei com o PrimeFaces 3.4 e JSF 2 e funcionou perfeitamente.
    O unico problema que tive foi por que o primefaces já possui o JQuery entao removi a linha de inclusao do jquery.js.

    No Mais funciona perfeitamente.

    Obrigado.

    Responder

  9. Olá Rafael, ótimo post, está sendo de grande ajuda, mas o problema é o seguinte, estou tentando criar uma máscara para placa de carro, no caso, XXX-9999, mas ele não permite letras, somente números. É isso mesmo, ou eu estou fazendo algo errado?

    Responder

  11. Olá Rafael, pessoal!

    Sim, existe um bug com Firefox. Aqui, não funciona no Firefox 15.0.1 (e outros, que vi).
    Para funcionar, coloque “maxlength” com algum valor no input em questão, por exemplo:
    maxlength=”90″

    Boa sorte!

    Responder

  12. Parabéns pelo post.
    Muito bem explicado e comentado, tornando possível sua aplicação para quem não tem tanto conhecimento em jquery
    Parabéns

    Responder

  14. Olá Rafael, muito bom o artigo. É justamente o controle para casas decimais que estava procurando.
    Porém, hoje eu utilizo o maskInput e mesmo com as alterações sugeridas por você, dá conflito e não funciona.
    Existe mais alguma coisa a ser feita para os 2 funcionarem juntos ?
    Obrigado,
    Carlos

    Responder

  18. Pessoal, td bem, estou utilizando na minha aspx e dentro de um contentplaceholder, quando inicio a página funciona uma beleza, mas ao clicar no botão incluir na minha página ele perde a funcionalidade no campo de valor, veja como faço:

    $(document).ready(function(){
    $(“input.dinheiro”).maskMoney({showSymbol:false, symbol:”R$”, decimal:”,”, thousands:”.”});
    });

    E no meu html fica:

    Valor

    Alguém pode ajudar ??? Obrigado!!

    Responder

  21. Problema, quando trabalho com uma condição na select para ocultar e exibir o campo com a mascara, apos uma mudança funciona bem, já ao mudar novamente o campo buga carregando duas mascara.
    function Esconde(){

    var valor = $(“#tipo”).val();

    if(valor == “Entrada”){
    $(‘#valor’).show();
    $(‘#valorlbl’).show();
    $(“#valor”).maskMoney({showSymbol:true,symbol:”R$”, decimal:”,”, thousands:”.”, allowZero:true});
    }
    if(valor == “Saida”){
    $(‘#valor’).hide();
    $(‘#valorlbl’).hide();
    }

    }

    Responder

    1. Olá Junior,

      Define a mascara no elemento logo que a página for carregada. Depois use sua função apenas para dar um “show” ou “hide” no elemento. Senão toda hora que pedir para exibir o campo ele vai executar a linha:
      $(“#valor”).maskMoney({showSymbol:true,symbol:”R$”, decimal:”,”, thousands:”.”, allowZero:true});

      Abs!

      Responder

  23. Excelente post!
    Já tinha feito funcionar por outros caminhos.
    Estou tendo problemas na hora de gravar. O valor fica dividido por 100.
    Tem alguma orientação pra dar?
    Desde já obrigado.
    E parabéns pela iniciativa.

    Responder

  24. Rafael, obrigado pela resposta.

    O HTML é assim:
    Valor Multa:

    Valor Atualização:

    e o javascript assim:

    // <![CDATA[
    jQuery(function($) {
    $(".Valor").maskMoney({prefix:'R$ ', allowNegative: false, thousands:'.', decimal:',', affixesStay: false, allowZero:true, precision: 2});
    $(".ValorAtual").maskMoney({prefix:'R$ ', allowNegative: false, thousands:'.', decimal:',', affixesStay: false, allowZero:true, precision: 2});
    // ]]>

    o browser está enviando o seguinte:

    valor = 15.648,55, vlrAtualizMonetaria = 900,56,

    Ou seja, o campo está formatado. Se conseguisse retirar a formatação antes de mandar gravar, creio que resolveria.

    Abraço e obrigado.

    Responder

  30. Bom dia, eu tenho um campo neste caso o comando
    $(‘.moeda’).maskMoney({prefix:”, thousands:’.’, decimal:’,’, symbolStay: true});
    funciona perfeitamente, mas eu também crio campos dinamicamente como este
    $(‘#d_valorparcelap’+($i)).append( ” );
    neste caso o maskMoney não está funcionando , alguma sugestão ?

    Responder

  32. Rafael, eu chamo dentro de $(document).ready(function()
    {
    no final dele eu boto
    $(‘.moeda’).maskMoney({prefix:”, thousands:’.’, decimal:’,’, symbolStay: true}); // pra campos decimais

    chamo pela classe .moeda, e tanto os inputs que funcionam bem , como os que crio dinamicamente que não funcionam tem a classe .moeda

    Responder

  37. Tem como colocar máscara para informações retiradas do meu Bando de Dados?

    Tipo puxo um valor decimal e transformo ele pra monetário, mas utilizando em texto (), tem como?

    Responder

  38. Rafael, boa tarde!
    Embora eu tenha feito o plugin funcionar normalmente na página que havia desenvolvido, quando eu faço um include “php” desta página, o plugin não funciona mais.

    A minha dúvida mais detalhada está nestes dois links:
    http://forum.imasters.com.br/topic/531598-plugin-maskmoney-nao-roda-por-include/
    http://www.scriptbrasil.com.br/forum/topic/177930-phpmaskmoney-nao-funciona-no-include/
    Você já se deparou com esta situação antes?

    Responder

  39. Rafael, já consegui resolver.
    Portanto, pode desconsiderar o meu comentário anterior.

    Caso queira visualizar a solução, é só acessar os dois links que passei anteriormente.

    Responder

  40. Rafael, boa tarde.
    Estou usando o seu plugin, é muito bom, mas gostaria de tirar uma dúvida.
    Eu precisava fazer algo como mínimo e máximo. Tipo de 1 a 5. E não tem onde eu fazer isso com esse plugin né? Ou eu que não estou achando?

    No aguardo de uma resposta breve

    Responder

  41. ola! estou precisando muito de ajuda para juntar 2 codigos java. é que estou fazendo um site, e preciso somar as chekbox no formato moeda com R$ e mandar o formulario por e-mail. desde ja agradeço

    1º codigo

    function sumChecked() {
    var result = $(“input:checked”);
    var total = 0;
    for (var i=0;i<result.length;i++)
    {
    total = total+parseFloat(result[i].value);
    }
    $("#result").val(total.toFixed(2));
    }
    sumChecked();
    $(":checkbox").click(sumChecked);

    ————————————————————
    2º codigo

    String.prototype.formatMoney = function() {
    var v = this;

    if(v.indexOf(‘.’) === -1) {
    v = v.replace(/([\d]+)/, “$1,00”);
    }

    v = v.replace(/([\d]+)\.([\d]{1})$/, “$1,$20”);
    v = v.replace(/([\d]+)\.([\d]{2})$/, “$1,$2”);
    v = v.replace(/([\d]+)([\d]{3}),([\d]{2})$/, “$1.$2,$3″);

    return v;
    };
    String.prototype.toFloat = function() {
    var v = this;

    if (!v) return 0;
    return parseFloat(v.replace(/[\D]+/g, ” ).replace(/([\d]+)(\d{2})$/, “$1.$2”));
    };
    (function(){
    “use strict”;

    var $chs = document.querySelectorAll(‘input[name=”ch[]”]’),
    $result = document.getElementById(‘result’),
    chsArray = Array.prototype.slice.call($chs);

    chsArray.forEach(function(element, index, array){
    element.addEventListener(“click”, function(){
    var v = this.value,
    result = 0;
    v = v.toFloat();

    if (this.checked === true) {
    result = $result.value.toFloat() + parseFloat(v);
    } else {
    result = $result.value.toFloat() – parseFloat(v);
    }

    $result.value = “R$ ” + String(result).formatMoney();
    });
    });

    }());

    Responder

  42. Já utilizo essa máscara faz uns 3 anos, porém, ainda não tinha tido necessidade de inserir opção para que a máscara aceite valor 0 (zero). Este post me ajudou bastante, obrigado.

    Responder

  43. Rafael, eu coloco o seguinte código:
    $(“.input-prices”).maskMoney({decimal:’,’, prefix: ‘R$ ‘});

    O R$ aparece antes do valor, porém quando eu digito algo nada acontece, fica sempre em R$0,00.

    O que pode ser?

    Obrigado, abs!

    Responder

  46. estou desenvolvendo um sistema para e resolvi utilizar este script para moeda que é interessante, porém conforme atualização da biblioteca jquery é necessário alterar um parâmetro:
    linha 166:

    De: if ($.browser.msie) {
    Para: if(navigator.userAgent.match(“MSIE”)){

    somente isto, espero ter ajudado. abraços

    Responder
  47. Pingback: O Uso do InputNumber do Primefaces Extensions | Atitude Reflexiva

  48. Quando somando dois valores, não esta acima de milhar:

    $(“#txtCapexRedeAcesso”).blur(function () {
    var capexRedeAcesso = $(“#txtCapexRedeAcesso”).val().replace(‘.’, ”).replace(‘,’, ‘.’);
    var capexRedeBasica = $(“#txtCapexRedeBasica”).val().replace(‘,’, ‘.’);
    var capextotal = (parseFloat(capexRedeAcesso) + parseFloat(capexRedeBasica));
    $(“#txtCapexTotalProjeto”).val(capextotal);

    });
    $(“#txtCapexRedeBasica”).blur(function () {
    var capexRedeAcesso = $(“#txtCapexRedeAcesso”).val().replace(‘.’, ”).replace(‘,’, ‘.’);
    var capex

    Responder

  49. Eu estou utilizando essa máscara e está funcionando bem, o único problema é que eu não sei definir a precisão numérica antes da virgula (ex: permitir que sejam incluídos apenas 2 números antes da virgula: 99,99). Alguém pode me ajudar? Obrigado.

    Responder

  53. Salve pessoa, gostei mt da mascara, muito funcional, porém só no front-end, quando eu tento transferir os valores do input para trabalhar ele em JSP, eles vem mal formatados, eu gostaria só dos numeros, pontos e virgulas não, alguém pode me ajudar quanto a isso?

    Responder

  54. Problema quando o valor tem casa decimal = ,00
    por exemplo o valor sendo :
    20,00 mostra 20 e quando coloco o mouse no input fica pior aparece RS 0,20
    Como resolver ?

    Responder

Deixe um comentário

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