15

Em caixas eletrônicos e sites de internet banking há campos numéricos que quando você digita eles são preenchidos da direita para a esquerda, aumentando o número conforme vai digitando, por exemplo:

+-----+--------------+
|tecla|valor do campo|
+-----+--------------+
|     | 0,00         |
|  1  | 0,01         |
|  2  | 0,12         |
|  3  | 1,23         |
|  4  | 12,34        |
|  5  | 123,45       |
|  6  | 1.234,56     |
+-----+--------------+

Qual a solução em JavaScript para fazer isso?

3
  • 3
    Já que você colocou jQuery na pergunta, dê uma olhada neste plugin: github.com/plentz/jquery-maskmoney
    – bfavaretto
    Commented 13/01/2014 às 17:36
  • No exemplo vejo os caracteres sendo inseridos da esquerda para a direita. Vc se refere a alinhar o valor na direita e a inserir a virgula/ponto? Commented 13/01/2014 às 17:36
  • @GuilhermeBernal Seria isso também, mas o principal é que conforme vai digitando o número se transforma, vou editar a pergunta para ficar mais claro. A questão é ir preenchendo da esqueda para a direita conforme a pessoa vai digitando, num campo normal se a pessoa digitar 12, sai 12, nesse sairia 0,12. Commented 13/01/2014 às 17:38

3 Respostas 3

5

Experimente usar essa função para setar a mascara para moeda:

function MascaraMoeda(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;
    if (whichCode == 13) 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;
}

Para usa-la é só chamar na input:

<form>
    Valor R$: <input type="text" name="valor" onKeyPress="return(MascaraMoeda(this, '.', ',', event))">
</form>
3
  • Perfeito! Obrigado @DenisBernardo. Commented 13/01/2014 às 17:47
  • Por nada! @AlexandreMarcondes Commented 13/01/2014 às 17:49
  • Fiz algumas modificações e melhorias nesse código. Olha aqui um exemplo no Fiddler Commented 15/01/2014 às 16:28
4

Testei ambas as respostas do @DenisBernardo e do @bfavaretto (maskMoney plugin) e encontrei algumas pequenas diferenças. Por exemplo:

  • Usando o plugin do jQuery, quando o conteúdo do campo é apagado com a tecla DELETE o valor é alterado para "0,00", enquanto na outra solução ele fica vazio.

  • Ao selecionar o campo inteiro e pressionar um número qualquer, o plugin do jQuery substitui o conteúdo pelo novo número digitado, enquanto a função apenas o adiciona ao final do valor atual.

São diferenças mínimas, mas podemos dizer que a vantagem da solução em Javascript é a independência, entretanto o maskMoney é mais flexível (conta com muitas opções) e fácil de aplicar, já que é possível usar um selector CSS para incluir todos os campos de um formulário de uma só vez:

$('#moeda').maskMoney({ thousands: '.', decimal: ',' });
0

Da pra fazer com esse script:

<script type="text/javascript">

    /* Máscaras ER */
    function mascara(o,f){
        v_obj=o
        v_fun=f
        setTimeout("execmascara()",1)
    }

    function execmascara(){
        v_obj.value=v_fun(v_obj.value)
    }

    function mvalor(v){
        v=v.replace(/\D/g,"");
        v=v.replace(/(\d)(\d{8})$/,"$1.$2");
        v=v.replace(/(\d)(\d{5})$/,"$1.$2");

        v=v.replace(/(\d)(\d{2})$/,"$1,$2");
        return v;
    }

</script>

E chamar no html:

CAMPO:

Acredito que atende o que vc precisa.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .