Acrescentar Decimal quando sair do Campo (Blur)

leandro alfredo · 25 de janeiro de 2017

Preciso que no meu campo input possa ser digitado valores (exceto letras) normais, como por exemplo: 0,1; 5; 14,56; 7,3; 0,36; e assim por diante. Porém, quando eu sair do campo, gostaria, que esses valores digitados fossem transformados para duas casas decimais, exemplo conforme o primeiro exemplo: 0,10; 5,00; 14,56; 7,30; 0,36;

Sabem como posso fazer?

joseph_dev · 25 de janeiro de 2017

Opa!

Tenta ai:

<html>
  	<head>
    </head>
  	<body>
		<input type="text" onblur="mascara(this)">
  	</body>
	<script>
		function mascara(btn){
			var valor = btn.value.replace(',','.'); //o parseFloat só considera decimal com ponto e nao com virgula
			var novoValor = parseFloat(valor).toFixed(2);
			btn.value = novoValor;
		}
	</script>
</html>

DiF · 25 de janeiro de 2017

@leandro alfredo Você pode fazer com jQuery também que ao meu ver é melhor.

<input type="text" class="valores" placeholder="Insira um valor " />

$(document).ready(function(){
    //Armazena o campo em uma variável
    var campo = $(".valores");
    
    /*chama a função ON() que recebe o 
    evento blur e uma função como parâmetro */
    campo.on("blur", function(){
         //armazena o valor do campo e substitui a virgula por ponto
         var val = $(this).val().replace(',','.');
         var numero = parseFloat(val);
         
         //adiciona o valor decimal no número digtado
         var decimal = numero.toFixed(2);
         
         //aplica o próprio campo o novo valor.
         $(this).val(decimal);
    });  
});

O código está todo comentado para você entender linha a linha

Veja funcionando:

https://jsfiddle.net/dife/mpskqgv7/3/

leandro alfredo · 26 de janeiro de 2017

14 horas atrás, joseqfneto disse:

Opa!

Tenta ai:


<html>
  	<head>
    </head>
  	<body>
		<input type="text" onblur="mascara(this)">
  	</body>
	<script>
		function mascara(btn){
			var valor = btn.value.replace(',','.'); //o parseFloat só considera decimal com ponto e nao com virgula
			var novoValor = parseFloat(valor).toFixed(2);
			btn.value = novoValor;
		}
	</script>
</html>

Bom dia, muito obrigado. É isto mesmo que eu preciso.

Porém, eu precisaria que quando estive vazio o campo não aparecesse "NaN".

E que não deixasse digitar letras somente , (vírgula) ou . (ponto).

Eu uso esta função para somente número.

<script language='JavaScript'>    
        function SomenteNumero(e){     
         var tecla=(window.event)?event.keyCode:e.which;     
         if((tecla > 47 && tecla<58)) return true;
             else{
                if (tecla==8 || tecla==0) return true;
                else return false;
             }
        }
    </script>

Como eu a altero para somente número e virgula/ponto?

Obrigado

joseph_dev · 26 de janeiro de 2017

@leandro alfredo

Dei uma melhorada ai para se adequar a sua necessidade. Testa ai nos principais navegadores... É bom você dar uma olhada em jquery como @DiF falou, que tem muita coisa massa. De inicio JS puro é melhor de entender mas depois comece a usar o jquery.

<body>
  <input type="text" onkeydown="SomenteNumero(event)" onblur="mascara(this)">
</body>
<script>
  function SomenteNumero(e){
    var tecla = e.keyCode;
    //habilitado números, virgula, backspace,tab e enter
    if(!((tecla >= 48 && tecla <= 57) || (tecla >= 96 && tecla <= 105) || 
       tecla == 110 || tecla == 188 || tecla == 8 || tecla == 13 || tecla == 9)){
     e.preventDefault();
    }
  }
  
  function mascara(btn){
    var valor = btn.value.replace(',','.');
    if(valor){
      var novoValor = parseFloat(valor).toFixed(2);
      btn.value = novoValor;
    }
  }
</script>

leandro alfredo · 27 de janeiro de 2017

FINALIZADO:

Postando Script finalizado para quem precisar futuramente:

O que eu tratei:

Quando não tiver nada no campo deixar padrão "0,000";

Deixar digitar somente Números, "," e ".";

Ainda não estou precisando. Mas este script ficaria perfeito se colocar também "." (ponto) separando milhar, milhão, etc... Quem quiser melhorar o script fiquem a vontade e poste aqui para nós.

Abraço e a obrigado a todos que contribuíram.

<html>
  	<head>
    <script language='JavaScript'>	
		function SomenteNumero(e){	 
		 var tecla=(window.event)?event.keyCode:e.which;	 
		 if((tecla>43 && tecla<58)) return true;
			 else{
				if (tecla==8 || tecla==0) return true;
				else return false;
			 }
		}
	</script>
    <style>
    	input {	padding:8px; border:1px solid grey;	text-align:right; }
    </style>
    </head>
  	<body align=center>
		<input type="text" onKeyPress="return SomenteNumero(event);" onBlur="mascara(this)" autofocus>
  	</body>
	<script>
		function mascara(btn){
			if(btn.value) {
				var valor = btn.value.replace(',','.');
				var novoValor = parseFloat(valor).toFixed(3);			
				var valor = novoValor.replace('.',',');			
				btn.value = valor;
			} else {
				btn.value = "0,000";
			}
		}
	</script>
</html>