在输入更改时将 html-Input-value 显示为德语格式的数字,同时跟踪十进制数
P粉615886660
P粉615886660 2023-09-12 15:55:33
0
1
786

所以德国十进制数使用十进制逗号。格式化时,我们还使用句点对数字进行分组。因此数字 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 事件上。或者甚至使用旁边的按钮或其他东西。 如果有任何提示,我将不胜感激!:)

P粉615886660
P粉615886660

全部回复(1)
P粉127901279

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

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

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板