Deutsche Dezimalzahlen verwenden also Dezimalkommas. Bei der Formatierung verwenden wir auch Punkte, um Zahlen zu gruppieren. Die Zahl 10000,45 wird also als 10.000,45 formatiert.

Jetzt möchte ich ein Eingabefeld (Zahl oder Text), in das man auf „deutsche“ Weise mit Punkten und Kommas eingeben kann. Allerdings möchte ich auch „normale“ Werte in JavaScript verfolgen.

Verwenden Sie den folgenden Befehl, um einen numerischen Wert einfach in einen Wert im deutschen Format umzuwandeln

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

Aber wie bringt man es wieder auf eine Dezimalzahl zurück? Denn wenn ich einen Wert im deutschen Format wie „7,20“ anzeige, hänge ich ihn an das Ende an, oder?

Dies ist ein erster Versuch von svelte-repl, wie unten gezeigt: 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>

Idealerweise möchte ich den formatierten Wert im Eingabeereignis anzeigen. Es kann aber auch bei On-Change-Events erscheinen. Oder verwenden Sie sogar den Knopf an der Seite oder so. Für jeden Tipp wäre ich sehr dankbar! :)