Ir ao conteúdo
  • Comunicados

    • Gabriel Torres

      Seja um moderador do Clube do Hardware!   12-02-2016

      Prezados membros do Clube do Hardware, Está aberto o processo de seleção de novos moderadores para diversos setores ou áreas do Clube do Hardware. Os requisitos são:   Pelo menos 500 posts e um ano de cadastro; Boa frequência de participação; Ser respeitoso, cordial e educado com os demais membros; Ter bom nível de português; Ter razoável conhecimento da área em que pretende atuar; Saber trabalhar em equipe (com os moderadores, coordenadores e administradores).   Os interessados deverão enviar uma mensagem privada para o usuário @Equipe Clube do Hardware com o título "Candidato a moderador". A mensagem deverá conter respostas às perguntas abaixo:   Qual o seu nome completo? Qual sua data de nascimento? Qual sua formação/profissão? Já atuou como moderador em algo outro fórum, se sim, qual? De forma sucinta, explique o porquê de querer ser moderador do fórum e conte-nos um pouco sobre você.   OBS: Não se trata de função remunerada. Todos que fazem parte do staff são voluntários.
    • DiF

      Poste seus códigos corretamente!   21-05-2016

      Prezados membros do Fórum do Clube do Hardware, O Fórum oferece um recurso chamado CODE, onde o ícone no painel do editor é  <>     O uso deste recurso é  imprescindível para uma melhor leitura, manter a organização, diferenciar de texto comum e principalmente evitar que os compiladores e IDEs acusem erro ao colar um código copiado daqui. Portanto convido-lhes para ler as instruções de como usar este recurso CODE neste tópico:  
Thyago Barbosa

HTML Máscara de Moeda (Estilo Excel)

Recommended Posts

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

Compartilhar este post


Link para o post
Compartilhar em outros sites

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!

Editado por RodrigoMoraiss
Melhorar visualização.
  • Amei 1

Compartilhar este post


Link para o post
Compartilhar em outros sites
  • Autor do tópico
  • @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/

    Compartilhar este post


    Link para o post
    Compartilhar em outros sites

    @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.

    Compartilhar este post


    Link para o post
    Compartilhar em outros sites
  • Autor do tópico
  • @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.

    Compartilhar este post


    Link para o post
    Compartilhar em outros sites

    @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;                    
    }

     

    Compartilhar este post


    Link para o post
    Compartilhar em outros sites
  • Autor do tópico
  • @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í :D

    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;
    }


     

    Editado por Thyago Barbosa

    Compartilhar este post


    Link para o post
    Compartilhar em outros sites

    Crie uma conta ou entre para comentar

    Você precisar ser um membro para fazer um comentário






    Sobre o Clube do Hardware

    No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas publicações sobre tecnologia do Brasil. Leia mais

    Direitos autorais

    Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

    ×