在输入更改时将 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。