在輸入變更時將 html-Input-value 顯示為德語格式的數字，同時追蹤十進位數

Question

所以德國十進制數使用十進制逗號。格式化時，我們也會使用句點對數字進行分組。因此數字 10000.45 將被格式化為 10.000,45。

現在我想要一個輸入欄位（數字或文字），您可以在其中使用句點和逗號輸入「德語」方式。但是，我還想追蹤 JavaScript 中的「正常」數值。

使用以下指令可以輕鬆將數值轉換為德語格式的值

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

但是如何將其恢復為十進制數呢？因為當我顯示像“7,20”這樣的德語格式的值時，我會附加到末尾，對嗎？

這是一個 svelte-repl 的初步嘗試，如下所示： 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>

理想情況下，我希望在輸入事件上顯示格式化的值。但它也可以出現在 on-change 事件上。或甚至使用旁邊的按鈕或其他東西。 如果有任何提示，我將不勝感激！ :)

Answer 1

我建議不要弄亂用戶輸入，也就是不要在 input 事件處理程序中設定 formattedValue 。如果您想很好地設定數字格式，請在第一次顯示元件時執行此操作，並在模糊上執行此操作，以防止幹擾使用者的意圖。

如果您確實想在使用者輸入時嚴格規定某種格式，那麼這並不簡單，因為必須考慮遊標位置、數字符號、清除值和其他因素。還有一些函式庫可以實現這一點，例如imask。