Question

在我的Web应用程序中，我需要允许用户在输入字段中输入资金。货币和金额格式在不同字段中可能会有所不同。因此，尽管用户可以在一个字段中输入此内容：

$ 1,234.56

对于美国地区的美元，他们可以在另一个字段中输入：

€1.234,56

使用德国作为地区的欧元。

不管货币是什么，金额的格式设置在哪个区域，内部值都应以相同的方式返回，在这种情况下，应为：

1234.56

我只能使用类型设置为“文本”的输入字段，但是随后我将不得不编写代码来检查货币符号以及该值的格式。但是用户可能没有输入货币符号。另外，如果没有货币符号，我看不出一种区分区域数字的清晰方法。

有什么解决方案可以让用户选择货币符号并管理输入的值以提供一致的内部值？

Answer 1

如果有一种方法可以仅使用我不知道的特定类型的HTML输入来实现，那么最接近的输入应该是type=number，尽管这不允许使用格式化数字。

对于文本类型并让代码检查输入，如果您可以假定数字始终被格式化为拉丁数字，则可以使用比较幼稚的方法使用正则表达式。

function normalize(currency) {
  const naive = /(?:(-)\s*)?(?:[^0-9]+\s*)?([0-9]{1,3}(?:[ ,\.]?[0-9]{3})*)(?:[,\.]([0-9]+))?(?:\s*[^0-9-]+)?(?:\s*(-))?/;
  const [,mina,base,fraction,minb] = currency.match(naive)||[];
  const min = mina || minb ? '-' : '';
  
  return base ? Number(`${min}${base.replace(/[^\d]+/g, '')}.${fraction||0}`) : '';
}


const output = document.querySelector('output');

document.querySelector('input[name=currency]')
  .addEventListener('input', (event) => {
    const { value } = event.target;
    
    output.value = normalize(value);
  });

<label>
  amount <input type=text name=currency>
</label>

<div>
  The normalized value: <output></output>
</div>

该表达式围绕以下概念构建：

(?:(-)\s*)?(?:[^0-9]+\s*)?：数字前可能有减号，并可选地后面跟货币符号
([0-9]{1,3}(?:[ ,\.]?[0-9]{3})*)：一个可能包含分组符号和三个数字的组的基数
(?:[,\.]([0-9]+))?：一个可选的分数，用逗号或句点表示。
(?:\s*[^0-9-]+)?(?:\s*(-))?：数字后面可能有减号，可以选择在货币符号后加

这适用于许多用例，尽管我认为它很幼稚，主要是因为它没有验证“千位分隔符”也没有用作分数分隔符。

a more thorough example

本地化的货币输入，允许使用不同的货币和地区

1 个答案: