JSFiddle - React, Tailwind, and code Playground

by Christian Sonne

HTML

<input type="text" placeholder="0,00" id="currency">

JavaScript

let previousValue = currency.placeholder;
function formatNumber(event) {
  let offset = 0;
  let {
    selectionStart,
    selectionEnd,
    value
  } = event.target;
  let currentNumber = value.replace(/\./g, "").replace(/,+/, ".");
  let formatter = new Intl.NumberFormat('da-DK', {
    style: 'decimal',
    'minimumFractionDigits': 2,
    'maximumFractionDigits': 2
  })
  let formattedNumber = formatter.format(currentNumber);
  if (formattedNumber == "NaN") {
  	formattedNumber = previousValue;
    offset -= 1;
  }
  event.target.value = formattedNumber;
  event.target.setSelectionRange(selectionStart+offset, selectionEnd+offset);
  event.preventDefault();
  return false;
}

currency.addEventListener("input", formatNumber);