So German decimal numbers use decimal commas. When formatting, we also use periods to group numbers. So the number 10000.45 will be formatted as 10.000,45.

Now I want an input field (number or text) where you can enter the "German" way using periods and commas. However, I also want to track "normal" values ​​in JavaScript.

Use the following command to easily convert a numerical value to a value in German format

number.toLocaleString("de-DE", { maxFractionDigits: 2 })

But how to restore it to decimal number? Because when I display a value in german format like "7,20" I append to the end, right?

This is a preliminary attempt at svelte-repl, as shown below: https://svelte.dev/repl/fabd0a80f4ee49509cd875c0175bcf22?version=4.0.1

<script>
  let numericValue = 0;
  let formattedValue = '';

  function formatNumber(value) {
    return value.toLocaleString("de", {
      minimumFractionDigits: 2,
      maximumFractionDigits: 2
    });
  }

  function handleInput(event) {
    // Remove dots as thousand separators and convert decimal comma to dot
    const inputValue = event.target.value.replace(/\./g, '').replace(/,/g, '.');

    // Update numericValue with parsed float
    numericValue = parseFloat(inputValue);

    // Update formattedValue for display
    formattedValue = formatNumber(numericValue);
  }
</script>

<input type="text" value={formattedValue} on:input={handleInput} />

<p>Numeric value: {numericValue}</p>

Ideally I would like to display the formatted value on the input event. But it can also appear on on-change events. Or even use the button on the side or something. Any tips would be greatly appreciated! :)