Nov
02

JavaScript: Formatando moeda utilizando mascara

Autor: Couto
Categoria: JavaScript |


Quem nunca perrengou pela 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 delete, 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 < len; i++)
        if (strCheck.indexOf(objTextBox.value.charAt(i))!=-1) 
        	aux += objTextBox.value.charAt(i);
    aux += key;
    len = aux.length;
    if (len == 0) 
    	objTextBox.value = '';
    if (len == 1) 
    	objTextBox.value = '0'+ SeparadorDecimal + '0' + aux;
    if (len == 2) 
    	objTextBox.value = '0'+ SeparadorDecimal + aux;
    if (len > 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:

onKeyPress=”return(formataMoeda(this,’.',’,',event))”;

7 Responses to “JavaScript: Formatando moeda utilizando mascara”

  1. Márcio Says:
    julho 27th, 2008 at 15:58

    Sugestão: Faltou definir um limite. Com o maxlength não funciona limite.

    O resto está muito bom.

  2. Vinicius Mommensohn Says:
    agosto 27th, 2008 at 0:29

    Para limitar o tamanho coloque o seguinte:

    Antes da linha:

    if ((whichCode == 13) || (whichCode == 0) || (whichCode == 8)) return true;

    Coloque:

    if (objTextBox.value.length >= tamanho) whichCode = 1;

    Lembrando de trocar “tamanho” pelo tamanho desejado. Caso queira fazer a função adaptavel, coloque mais uma variavel de entrada na funcao.

    []s

    Vinicius G Mommensohn

  3. Claudinei Leonado Says:
    setembro 15th, 2008 at 8:31

    Muito boa essa função, gostei muito dela, como faço para almentar o numero de casas decimais para 3 casas.

  4. Ílson Bolzan Says:
    setembro 22nd, 2008 at 16:25

    Pra que o tamanho do campo fique de acordo com o textbox é só mudar aquela variável tamanho por objTextBox.maxLength

  5. Sandro Beraldo Says:
    novembro 26th, 2008 at 22:09

    Acrescentando uma informação.
    Depois que eu coloquei a paradinha para limitar o tamanho do valor digitado, acontecia um problema: quando o valor digitado atingia o tamanho de MaxLenght, não funcionava mais nem o enter nem o Backspace na janela, por causa do “whichCode = 1″.

    Então eu sugiro que adaptem aquela linha que foi acrescentada, para o modelo abaixo, pois eu testei e funfou:

    if ((objTextBox.value.length >= objTextBox.maxLength) && (whichCode != 13) && (whichCode != 8)) whichCode = 1;

  6. Douglas Says:
    dezembro 2nd, 2008 at 22:35

    Bem pessoal, eu tive que limitar de outra forma:
    Depois da linha que contem:
    len = objTextBox.value.length;
    eu coloquei o codigo abaixo:
    if(len >= objTextBox.getAttribute(’maxlength’))
    return false;
    pois retornava para mim undefined para objTextBox.maxLength

    agora funciona..
    []`s

  7. Fagner Says:
    junho 9th, 2009 at 11:57

    Pessoal,
    Este script é incompativel com o IE8, para que possa funcinar no IE8 e demais browsers.
    Faça o seguinte:
    1º: Comente o seguinte trecho de código:
    //var whichCode = (window.Event) ? e.which : e.keyCode;
    2º: Adicione o trecho abaixo no lugar
    var whichCode = (window.addEventListener) ? e.which : e.keyCode;
    3º:É só testar.

Deixe seu Comentário