Formatando moeda com javascript

Quem nunca perrengou pele net a procura de um algoritmo eficiente para formatar moeda em um campo texto?

Bom, se assim como eu você não tem tempo e/ou não esta disposto a passar dias e noites a fio desenvolvendo seu próprio script, vale a pena usar esse ai embaixo. Eu catei na net ha um tempo atrás e tem sido muito útil para aplicações mais simples. Ele cria uma mascara de moeda enquanto estamos digitando.

Não sei quem é o autor, pois como eu disse peguei na net. Só fiz uma pequena alteração, pois o script original não permitia a entrada de teclas que não fossem numéricas, assim era complicado corrigir um numero quando eu digitava errado.

Script:


function formataMoeda(objTextBox,SeparadorMilesimo, SeparadorDecimal,e){
var sep = 0;
var key = '';
var i = j = 0;
var len = len2 = 0;
var strCheck = '0123456789';
var aux = aux2 = '';
var whichCode = (window.Event) ? e.which : e.keyCode;
// 13=enter, 8=backspace as demais retornam 0(zero)
// whichCode==0 faz com que seja possivel usar todas as teclas como del, setas, etc
if ((whichCode == 13) || (whichCode == 0) || (whichCode == 8))
return true;
key = String.fromCharCode(whichCode); // Valor para o código da Chave

if (strCheck.indexOf(key) == -1)
return false; // Chave inválida
len = objTextBox.value.length;
for(i = 0; i < len; i++)
if ((objTextBox.value.charAt(i) != '0') && (objTextBox.value.charAt(i) != SeparadorDecimal))
break;
aux = '';
for(; i 2) {
aux2 = '';
for (j = 0, i = len - 3; i >= 0; i--) {
if (j == 3) {
aux2 += SeparadorMilesimo;
j = 0;
}
aux2 += aux.charAt(i);
j++;
}
objTextBox.value = '';
len2 = aux2.length;
for (i = len2 - 1; i >= 0; i--)
objTextBox.value += aux2.charAt(i);
objTextBox.value += SeparadorDecimal + aux.substr(len - 2, len);
}
return false;
}

Chamada ao script:

Como podem perceber este script apresenta um erro de sintaxe, esse erro acontece pois o plugin do wordpress não esta escapando corretamente o código. No link abaixo voces encontrarão o mesmo post com o script corrigido.
http://blog.zuntto.com/javascript-formatando-moeda-com-mascara/

http://www.couto.zuntto.com


20 Comentários on “Formatando moeda com javascript”

  1. Marcelo disse:

    Meu amigo, obrigado pelo seu script, me ajudou bastante.

    Estou com uma dificuldade que talvez vc já tenha superado.

    Tenho um campo do tipo decimal(10,2), no MySQL

    Apresentar valores deste campo formatado como moeda ex: 1.234,90 (fácil, usando number_format)

    Criar um form para editar o valor com formatação (seu script resolve)

    Salvar o valor digitado no banco MySQL ( O MySQL não aceita virgula, só aceita ponto (.) como separador decimal).

    Eu poderia salvar como string, mas isso inviabiliza o uso do campo para calculos no mysql.
    Você já passou por isso? tem alguma dica para me dar?

    obrigado.

  2. @Marcelo

    Você pode tratar o valor com str_replace (substituindo pontos por vazio e virgula por ponto)

    Ou então utilizar a função FORMAT nativa do MySQL em cima de alguma REGEX ou passando como argumento os campos necessários.

    Espero ter ajudado.

  3. Guilherme disse:

    Gostaria de deixar minha colaboração também, pesquisando na net achei este mesmo código com os créditos de Mario Costa (mariocosta@openlink.com.br) em mais de um site. Porem a adaptação de colocar mais teclas além das numericas é importantissimo pra garantir a boa navegabilidade. No exemplo postado aqui faltou apenas a tecla TAB, porem utilizando a mesma estrura de eventos de tecla e incluindo a tecla 9 o tab continua não funcionando em FF por exemplo. Então fiz mais alguns ajustes incluindo a tecla TAB e deixando ele ainda mais crossbrowser. Ai vai…

    function FormataReais(fld, milSep, decSep, e) {
    var sep = 0;
    var key = ”;
    var i = j = 0;
    var len = len2 = 0;
    var strCheck = ‘0123456789’;
    var aux = aux2 = ”;
    var whichCode = e.keyCode ? e.keyCode :
    e.charCode ? e.charCode :
    e.which ? e.which : void 0;
    if ((whichCode == 27) || (whichCode == 13) || (whichCode == 9) || (whichCode == 8)) return true;
    key = String.fromCharCode(whichCode);// Valor para o código da Chave
    if (strCheck.indexOf(key) == -1) return false; // Chave inválida
    len = fld.value.length;
    for(i = 0; i < len; i++)
    if ((fld.value.charAt(i) != ‘0’) && (fld.value.charAt(i) != decSep)) break;
    aux = ”;
    for(; i 2) {
    aux2 = ”;
    for (j = 0, i = len – 3; i >= 0; i–) {
    if (j == 3) {
    aux2 += milSep;
    j = 0;
    }
    aux2 += aux.charAt(i);
    j++;
    }
    fld.value = ”;
    len2 = aux2.length;
    for (i = len2 – 1; i >= 0; i–)
    fld.value += aux2.charAt(i);
    fld.value += decSep + aux.substr(len – 2, len);
    }
    return false;
    }

    xxxxxxxxxxxxxxxxxxxxx

    onKeyPress=”return(FormataReais(this,’.’,’,’,event))”

    xxxxxxxxxxxxxxxxxxxxx

    Valeu!!!

  4. Rafael disse:

    Galera,

    o quequer dizer isso: for(; i 2) {

    isso naum funciona nunca, será cabacisse minha?

  5. Rafael Mussi disse:

    Segue função corrigida:

    function formataMoeda(fld, milSep, decSep, e)
    {
    var sep = 0;
    var key = ”;
    var i = j = 0;
    var len = len2 = 0;
    var strCheck = ‘0123456789’;
    var aux = aux2 = ”;
    var whichCode = (window.Event) ? e.which : e.keyCode;
    if ((whichCode == 27) || (whichCode == 13) || (whichCode == 9) || (whichCode == 8)) return true; // Enter
    key = String.fromCharCode(whichCode); // recebe o valor da chave vinda da chave do código

    if (strCheck.indexOf(key) == -1) return false; // Chave não válida

    len = fld.value.length;

    for(i = 0; i < len; i++)
    if ((fld.value.charAt(i) != ‘0’) && (fld.value.charAt(i) != decSep)) break;
    aux = ”;
    for(; i 2)
    {
    aux2 = ”;
    for (j = 0, i = len – 3; i >= 0; i–)
    {
    if (j == 3)
    {
    aux2 += milSep;
    j = 0;
    }
    aux2 += aux.charAt(i);
    j++;
    }
    fld.value = ”;
    len2 = aux2.length;
    for (i = len2 – 1; i >= 0; i–)
    fld.value += aux2.charAt(i);
    fld.value += decSep + aux.substr(len – 2, len);
    }
    return false;
    }

  6. Rafael disse:

    o trecho ” for(; i 2) “ainda esta com erro, sera que poderiam corrigir.. obrigadoooo !!

  7. couto disse:

    Kra,
    Isso eh alguma bixera do wordpress. um trecho da funcao esta sendo misteriosamente ocultada. Estou te mandando o script por e-mail.
    Vlw

  8. Ilton Barbosa disse:

    Opa,
    Tem como me enviar também?
    Estou com problema na mesma linha de comando do for.

  9. Ricardo disse:

    Rsss, mais um cara que caiu aqui atraves do google ao pesquisar formatação de moeda, de tiver a possibilidade de me mandar por email, ricardo.out@gmail.com, testei a função do jeito que ela está agora e não está funcionando, é isso, um abraço!

    E são sites como o seu que ajudam o dia a dia do desenvolvedor de sistemas web como eu e de muitos webdesigners tb.

  10. couto disse:

    Obrigado Ricardo,
    Assim como voces, nos tambem utilizamos muito estes recursos oferecidos por outros colegas, e eh um prazer para nos poder contribuir para o fortalecimento de nossa comunidade.

    Abraco,

  11. Fabio disse:

    tambem tenho problemas com ” for(; i 2) “
    mattosoft@gmail.com

  12. Luis disse:

    Puxa vida, também estou com problema no trecho do for(; i 2)….

    se quiser me enviar por e-mail posso colocar o arquivo .js no meu servidor para download e te enviar a url para que você publique apenas o link.

  13. Couto disse:

    Senhores,
    Acessem o link:
    http://blog.zuntto.com/javascript-formatando-moeda-com-mascara/
    La’ encontraram o mesmo post com o script corrigido.

    Abraco,

  14. Adriano disse:

    Cara o link que vc passou esta fora e eu tb estou tendo o mesmo problema.
    Não tem alguma forma de colocar aqui nos post so esta parte do codigo. nem que seja separada por espaços.

  15. Jefferson disse:

    cara, isso aí é pra mascarar CPF, nunca que é de moeda! Amigo, se puder posta aí pra nóis um que formate pra moeda mesmo… Valeu!

  16. Couto disse:

    Prezado Jeferson,
    Se voce nao sabe diferenciar uma moeda de um cpf, eh melhor procurar um curos de corte-e-costura pra fazer.
    Abraco,

  17. Italo Romeiro disse:

    Galera, eu prefiro usar expressoes regulares, que eh muito mais elegante, apesar de nao serem tao obvias. Ai esta o codigo que eu fiz pra fazer isso ai que voces tao querendo, levando em consideracao alguns limites, claro

    moeda(12345672356879.1478654);
    function moeda(x) {
    var num = x;
    document.write(num + ”);
    num = num * 100;
    document.write(num + ”);
    num = num.toFixed(0);
    document.write(num + ”);
    num = num.toString().replace(/(\d{2})$/,”,$1″);
    document.write(num + ”);
    patt1=/^(\d{1,})(\d{3})(.\d{3})?(,\d{2})?\s*/;
    while( num.match(patt1) ) {
    num = num.replace(patt1,”$1.$2$3$4″);
    }
    document.write(num + ”);
    return num;
    }

    o lance eh mandar um float pro metodo e receber o string formatado, soh isso

    obs: deixei varios document.write pra quem for testar poder ver o que esta acontecendo

  18. Nossa, me serviu de mais.


Deixe uma resposta

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s