Zeigt den HTML-Eingabewert als Zahl im deutschen Format an, wenn sich die Eingabe ändert, während Dezimalzahlen verfolgt werden

Question

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! :)

Answer 1

我建议不要弄乱用户输入，即不要在 input 事件处理程序中设置 formattedValue 。如果您想很好地设置数字格式，请在第一次显示组件时执行此操作，并在模糊上执行此操作，以防止干扰用户的意图。

如果您确实想在用户输入时严格规定某种格式，那么这并不简单，因为必须考虑光标位置、数字符号、清除值和其他因素。还有一些库可以实现这一点，例如imask。