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;
  const transform = v => v.replace(/\./g, "").replace(/,+/, ".");
  let currentNumber = transform(value);
  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;
  }
  let leftOfCaret = value.substr(0, selectionStart);
  console.log({value, leftOfCaret});
  let difference = formatter.format(transform(leftOfCaret)).length - 3 > leftOfCaret.length;
	offset += difference;
  event.target.value = previousValue = formattedNumber;
  event.target.setSelectionRange(selectionStart + offset, selectionEnd + offset);
  event.preventDefault();
  return false;
}

currency.addEventListener("input", formatNumber);