Input number with coin mask

Question

Guys, I’m having trouble to implement a mask in my Input Number, I tested some plugins like (Jquerymask, Imask and etc.), the value of Input works, but the result gets a comma instead of the point..

I wanted to know if there is any way the value of the input is only with the visual of 1 000 00, but the original value of it is 1000000...

After the calculation I use localString and rolled all right, but in input I cannot format..

    $(function() {
  // inicializa e configura o plugin colResizable
  $("#range").colResizable({
    liveDrag: true,
    draggingClass: "rangeDrag",
    gripInnerHtml: "<div class='rangeGrip'></div>",
    onDrag: atualizaPorcentagens,
    minWidth: 8
  });



  // define variáveis úteis
  var rentabilidadeAtlas    = 13.68 / 100;
  var rentabilidadePoupanca = 1.12 / 100;
  var rentabilidadeBolsa    = 8.56 / 100;
  var rentabilidadeTesouro  = 1.51 / 100;
  var rentabilidadeBitcoin  = 27.70 / 100;

  var porcentagemAtlas = 20 / 100;
  var porcentagemPoupanca = 20 / 100;
  var porcentagemBolsa = 20 / 100;
  var porcentagemTesouro = 20 / 100;
  var porcentagemBitcoin = 20 / 100;

  var valorSelecionado = parseInt($("#input-currency").val());






  // função para simular o valor de cada modalidade de investimento
  function simulaValor () {
    // calcula os valores
    var valorAtlas    = valorSelecionado + (valorSelecionado * rentabilidadeAtlas);
    var valorPoupanca = valorSelecionado + (valorSelecionado * rentabilidadePoupanca);
    var valorBolsa    = valorSelecionado + (valorSelecionado * rentabilidadeBolsa);
    var valorTesouro  = valorSelecionado + (valorSelecionado * rentabilidadeTesouro);
    var valorBitcoin  = valorSelecionado + (valorSelecionado * rentabilidadeBitcoin);
    // insere no html
    $(".result_atlas_quantum span").html(valorAtlas.toLocaleString('pt-BR'));
    $(".result_poupanca span").html(valorPoupanca.toLocaleString('pt-BR'));
    $(".result_bolsa_de_valores span").html(valorBolsa.toLocaleString('pt-BR'));
    $(".result_tesouro_direto span").html(valorTesouro.toLocaleString('pt-BR'));
    $(".result_bitcoin span").html(valorBitcoin.toLocaleString('pt-BR'));
  }





  // função para simular carteira
  function simulaCarteira () {
    // calcula os valores
    var valorAtlas    = valorSelecionado * porcentagemAtlas + ((valorSelecionado * porcentagemAtlas) * rentabilidadeAtlas);
    var valorPoupanca = valorSelecionado * porcentagemPoupanca + ((valorSelecionado * porcentagemPoupanca) * rentabilidadePoupanca);
    var valorBolsa    = valorSelecionado * porcentagemBolsa + ((valorSelecionado * porcentagemBolsa) * rentabilidadeBolsa);
    var valorTesouro  = valorSelecionado * porcentagemTesouro + ((valorSelecionado * porcentagemTesouro) * rentabilidadeTesouro);
    var valorBitcoin  = valorSelecionado * porcentagemBitcoin + ((valorSelecionado * porcentagemBitcoin) * rentabilidadeBitcoin);
    // soma e insere no html
    var soma = valorAtlas + valorPoupanca + valorBolsa + valorTesouro + valorBitcoin;
    $(".value-circle span").html("R$ " + soma.toLocaleString('pt-BR', {
  minimumFractionDigits: 2,
  maximumFractionDigits: 2
}) );
  }





  // função para atualizar a váriavel das porcentagens ao arrastar o range slider
  function atualizaPorcentagens (e) {
    // código retirado da documentação do plugin...
    var columns = $(e.currentTarget).find("td");
    var ranges = [], total = 0, i, s = "Ranges: ", w;
    for(i = 0; i<columns.length; i++){
      w = columns.eq(i).width()-10 - (i==0?1:0);
      ranges.push(w);
      total+=w;
    }
    for(i=0; i<columns.length; i++) {
      ranges[i] = 100*ranges[i]/total;
      carriage = ranges[i]-w
      s+=" "+ Math.round(ranges[i]) + "%,";
    }
    // atualiza as variáveis de cada porcentagem
    porcentagemAtlas    = ranges[0] / 100;
    porcentagemPoupanca = ranges[1] / 100;
    porcentagemBolsa    = ranges[2] / 100;
    porcentagemTesouro  = ranges[3] / 100;
    porcentagemBitcoin  = ranges[4] / 100;
    //
    $(".text-atlas span").html((porcentagemAtlas * 100).toFixed(0) + "%");
    $(".text-poupanca span").html((porcentagemPoupanca * 100).toFixed(0) + "%");
    $(".text-bolsa span").html((porcentagemBolsa * 100).toFixed(0) + "%");
    $(".text-tesouro span").html((porcentagemTesouro * 100).toFixed(0) + "%");
    $(".text-bitcoin span").html((porcentagemBitcoin * 100).toFixed(0) + "%");
    // executa a função para simular carteira
    simulaCarteira();
  }





  // ao mudar o valor do input...
  $("#input-currency").change(function() {
    valorSelecionado = parseInt($("#input-currency").val());
    simulaValor();
    simulaCarteira();
  });




  // init
  simulaValor();
  simulaCarteira();





});

Answer 1

I have a code suggestion so you can adapt to your project.

This code puts the mask the way you want it.

var Erp = Erp || {};

Erp.Formatter = (function() {

	function Formatter() {
		this.configMask = {
			// símbolo que separa o valor decimal
			decimal : ' ',
			// símbolo do milhar
			thousands : ' ',
			allowZero : true
		};
		this.decimal = $('.js-decimal');
		this.plain = $('.js-plain');
	}

	Formatter.prototype.enable = function() {
		this.decimal.maskMoney(this.configMask);

		this.configMask.precision = 0;

		this.plain.maskMoney(this.configMask);
	}

	return Formatter;
}());

$(function() {
	new Erp.Formatter().enable();

});

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" >
	</head>
<body>
	<label>Valor</label>
	<input type="text" class="js-decimal" id="megasena" >

</body>
	<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-maskmoney/3.0.2/jquery.maskMoney.min.js"></script>
	<script src="script.js"></script>
</html>