How do I format the text typed in the input without changing the value?

Question

Guys, I have a problem with this piece of code that I can’t solve in any way. In this case, the first two inputs receive values that are summed and this sum appears in the last input with the id money.

              <td><b>Dinheiro</b></td>
              <!-- Dinheiro - Valor Encontrado -->
              <td><input type="number" class="form-control" id="dve" min="1" value="0" onkeyup="Calcular()" onmouseout="Calcular()" onkeydown="Calcular()"/></td>
              <!-- Dinheiro - Sistema -->
              <td><input type="number" class="form-control" id="ds" min="1" value="0" onkeyup="Calcular()" onmouseout="Calcular()" onkeydown="Calcular()"/></td>
              <!-- Dinheiro - Divergência -->
              <td><input type="text" value="0" class="form-control" id="dinheiroDivergencia" disabled></td>

My problem is in formatting the input, I would like the user to type the numbers automatically, for example, when typing 333,333,333, the commas were automatically added to every three numbers. I was able to do this using Cleaver.js and Autonumeric.js, but they save everything at the time of the sum.

Answer 1

Editing my original answer, you already use Cleave.JS.

In Cleave.JS there is the option for you to take the RAW or Formatted number, and set which will be the decimal separator.

Look at my example: https://jsfiddle.net/Ricardozambon/xfbakc68

I added the decimal separator, and when bringing the result, change to the point and recover in Javascript.

Of course, it all depends a lot on which Front-end you want to use.

I hope I’ve helped.

Answer 2

To insert the commas:

function addCommas(event) {
    event.value = event.value.replace(/\D/g, '')
    .replace(/\B(?=(\d{3})+(?!\d))/g, ',');
}

To add up the values later:

function removeCommas(valueWithCommas   ) {
    return +valueWithCommas.replace(/,/g, '');
}

The function addCommas can use on onkeyup and the function removeCommas in the elements before making the sum of your values in your calculation function.

There is no need to onkeydown and onmouseout. The onkeyup is enough. This solution addressed was with pure javascript, frameworks indepente.

Good studies!

function changeValue(event) {
	event.value = addCommas(event.value.replace(/\D/g, ''));
	calculate();
}

function addCommas(value) {
        return value.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
}

function calculate() {
	const dve = removeCommas(document.querySelector('#dve').value);
	const ds = removeCommas(document.querySelector('#ds').value);
	const divergence = document.querySelector('#dinheiroDivergencia');
	divergence.value = addCommas(`${dve + ds}`);
}

function removeCommas(valueWithCommas) {
	return +valueWithCommas.replace(/,/g, '');
}

<table>
	<tbody>
		<tr>
			<td>
				 <b>Dinheiro</b>
			</td>
			<!-- Dinheiro - Valor Encontrado -->
			<td>
				<input type="text" class="form-control" id="dve" value="0" onkeyup="changeValue(this)"/>
			</td>
			<!-- Dinheiro - Sistema -->
			<td>
				<input type="text" class="form-control" id="ds" value="0" onkeyup="changeValue(this)"/>
			</td>
			<!-- Dinheiro - Divergência -->
			<td>
				<input type="text" value="0" class="form-control" id="dinheiroDivergencia" disabled>	
			</td>
		</tr>
	</tbody>
</table>