HTML Máscara de Moeda (Estilo Excel)

[Thyago Barbosa]

Alguém sabe me dizer como faço pra colocar uma máscara de moeda estilo a formatação "contábil" do Excel?
Tipo, você digita "25555" e quando eu retirar o foco ele mostrar "R$ 25.555,00" (ou "2555,8" e aparecer "R$ 2555,80") e quando eu clicar pra digitar novamente, ele aparecer o "25555" (ou "2555,8") que tinha digitado?

O que tenho no momento é isso aqui,

        <td class="bordaPreta">
          <span> R$ </span><input type="text" name="valr-parc" placeholder="0,00" />
        </td>

se alguém puder fazer a máscara usando o exemplo abaixo ficarei agradecido

[RodrigoMoraiss]

Amigo, você pode usar Javascript? Pois acredito que a solução seja mais simples e talvez melhor usando o JS, talvez tenha como fazer pelo atributo pattern do HTML, mas não sei se seria a melhor maneira.

 

Caso a resposta seja positiva, tenho uma função para isso.

 

<script>
 
  function formataMoeda(z) {
      v = z.value;
      v = v.replace(/\D/g, "") //permite digitar apenas números 
      v = v.replace(/[0-9]{12}/, "inválido") //limita pra máximo 999.999.999,99 
      v = v.replace(/(\d{1})(\d{8})$/, "$1.$2") //coloca ponto antes dos últimos 8 digitos 
      v = v.replace(/(\d{1})(\d{5})$/, "$1.$2") //coloca ponto antes dos últimos 5 digitos 
      v = v.replace(/(\d{1})(\d{1,2})$/, "$1,$2") //coloca virgula antes dos últimos 2 digitos 
      z.value = v;
  }
  
</script>

 

E ai, no seu HTML, ficaria assim:

 

<td class="bordaPreta">
  <span> R$ </span><input type="text" name="valr-parc" placeholder="0,00" onKeyUp="formataMoeda(this)" />
</td>

 

Caso não entenda o que o código fez, podemos explicar melhor, mas deixei comentado e acho que está bem simples.

 

Abraço!

[Felipe Paz]

@Thyago Barbosa tem um plugin específico para formatar dados de input. O jQuery Mask Plugin. 

[Thyago Barbosa]

@RodrigoMoraiss Caraca mano, valeu mesmo, era isso daí que estava querendo, serviu direitinho para o que queria aqui

adicionado 0 minutos depois

@Felipe Paz Man eu tinha visto esse plugin, só que não sei como faz pra coloca ele dentro do meu html :/

adicionado 40 minutos depois

@RodrigoMoraiss Man, só uma dúvida, como eu faço pra colocar essa máscara em uma saída de calculo que não recebe valores por "keyup"? Tipo, é uma célula bloqueada pra digitação (readonly="readonly"), onde ela está retornando o resultado da multiplicação de 2 células.

No caso seria a célula "Total Parc.", queria que ela aparecesse com essa máscara também. Coloquei o html online pra você dar uma olhada > https://jsfiddle.net/L1819cgk/1/

[RodrigoMoraiss]

@Thyago Barbosa orra mano desculpa ai, acabei não vendo a pergunta.

 

Então, o que você pode fazer é colocar o valor formatado quando retorna para o input. Quando você fizer todos os calculos basta adicionar um .toLocaleString('pt-BR') para ele formatar.

 

seuvalor.toLocaleString('pt-BR');

 

Da uma testada se funciona pra você. Tem outros mil jeitos de fazer mas esse é muito simples.

[Thyago Barbosa]

@RodrigoMoraiss Entendi, funcionou, mas quando eu faço por exemplo 2x 555.555,55 o valor está retornando 1.111.111,1 sem completar as 2 casas decimais.

[RodrigoMoraiss]

@Thyago Barbosa  Entendi. Nesse caso melhor uma função "caseira" mesmo. Tenho uma pronta aqui, vê se serve:

 

function formataValor(valor) {
    valor = valor.toString().replace(/\D/g,"");
    valor = valor.toString().replace(/(\d)(\d{8})$/,"$1.$2");
    valor = valor.toString().replace(/(\d)(\d{5})$/,"$1.$2");
    valor = valor.toString().replace(/(\d)(\d{2})$/,"$1,$2");
    return valor;                    
}

 

[Thyago Barbosa]

@RodrigoMoraiss Eu fiz de outra maneira, usei esses replaces (e peguei alguns outros pra ficar mais resumido) como expressão regular direto na variável assim ó:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">

$(document).ready(function(){
	var qtd_parc   = $(".qtd-parc");
    var valr_parc  = $(".valr-parc");
    var total_parc = $(".total-parc");
    var dif  = $(".diferenca");
    var avista     = $(".avista"); 
    var zerar = $(".zerar");
    
	valr_parc.on("keyup", function(){
    	$(this).val($(this).val().replace(/\D/g,'').replace(/[0-9]{12}/, "").replace(/(\d{1})(\d{1,2})$/, "$1,$2").replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1.').replace(/^(\d)/g,"R$ $1")); 
		var nw_valr_parc = valr_parc.val().replace(/[^\d.,]/g, '').replace(".", "").replace(".", "").replace(".", "");
		var multiplica = qtd_parc.val() * nw_valr_parc.replace(",", ".");
			total_parc.val(multiplica.toFixed(2).replace(/\D/g,'').replace(/(\d{1})(\d{1,2})$/, "$1,$2").replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1.').replace(/^(\d)/g,"R$ $1"));
	
    });
    
	qtd_parc.on("change", function(){
    	$(this).val($(this).val().replace(/[^\d]/g, '')); 
		var nw_valr_parc = valr_parc.val().replace(/[^\d.,]/g, '').replace(".", "").replace(".", "").replace(".", "");
		var multiplica = qtd_parc.val() * nw_valr_parc.replace(",", ".");
			total_parc.val(multiplica.toFixed(2).replace(/\D/g,'').replace(/(\d{1})(\d{1,2})$/, "$1,$2").replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1.').replace(/^(\d)/g,"R$ $1"));
    });
});
</script>

Olha no exemplo online como ficou https://jsfiddle.net/h42dqjeL/1/

A única coisa que queria agora, era pra autocompletar os ,00 em casas decimais, tipo, eu digito "5" e ao invés de aparecer "R$ 5" (como está atualmente), apareceria "R$ 5,00" e a medida que eu fosse digitando número, ele ia substituindo esses "0". Daí ficaria, eu digitava "55" e ficava "R$ 5,50"; digitava "555" e ficava "R$ 5,55", eu tinha visto um código que fazia isso, mas estava usando em função e não sei como coloco como expressão regular igual estou usando.

A função que fazia isso era esse aqui, se você souber como faço pra acrescer os "00" como expressão regular me manda aí

function moeda(v) {
  v=v.replace(/\,0+$/,"") // Remove ,00 do final
  v=v.replace(/[^\d,]/g,"") // Remove tudo que não é dígito ou vírgula
  v=v.replace(/^0+/g,"")  // Remove zeros Ă  esquerda
  if(v.indexOf(",")+1){
    v=v.replace(/(,\d)$/,"$10") // 2,5 se torna 2,50
  }else{
    v+=",00" // Acrescenta ,00 ao final dos inteiros
  }
  for(var i=0;i<10;i++)
    v=v.replace(/(\d)(\d{3}[\.,])/,"$1.$2") // Separador de milhar
  v="R$ "+v // R$ no comeรงo
  return v;
}