Question

我有一个带有type='text'的文本字段，并且我试图用逗号格式化文本。例如：500000000将变成500,000,000。

我有以下代码：

function addComma(values) {
   values.value = values.value.replace(",", "").replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}

if (document.getElementById("values"))
    payment = parseInt(document.getElementById("values").value);

<label1>Rent</label1> <input id="values" type="text" onkeyup="addComma(this);">

但是，它正在打印5,000,0,0,0,000，并且由于某种原因该格式已关闭。我也尝试过.toLocaleString()，但这似乎也不起作用。我在这里做什么错了？

我曾在Stack Overflow上看到过其他几篇文章，但似乎没有任何解决方法。

Answer 1

function addComma(values) {
  const v = values.value && new Number(values.value.replace(/,/g,''));
   values.value = v.toLocaleString();
}

if (document.getElementById("values"))
         payment = parseInt(document.getElementById("values").value);

<label1>Rent</label1> <input id="values" type="text" onkeyup="addComma(this);">

Answer 2

您可以通过将数字转换为字符串，然后手动遍历每个字符并找到需要逗号的位置来实现。

function formatNumber(number) {
  var str = number.toString();
  var offset = str.length % 3;
  var newStr = '';
  for (var i = 0; i < str.length; i++) {
    if (i > 0 && i % 3 === offset) {
      newStr += ',';
    }
    newStr += str[i];
  }
  console.log(str, '=>', newStr);
}

formatNumber(5);
formatNumber(50);
formatNumber(500);
formatNumber(5000);
formatNumber(50000);
formatNumber(500000);
formatNumber(5000000);

Answer 3

我建议使用change事件而不是keyup事件，因为change仅在输入不再是焦点时才更新值。如果您使用keyup，则代码将尝试重新解释您添加为数字的新字符串，并抛出错误。

以下是使用toLocaleString的代码（只需在添加数字后按Tab键，就好像要移至下一个输入框一样）：

const values = document.querySelector('#values');
values.addEventListener('change', handleChange, false);

function handleChange(e) {
  const value = Number(e.target.value);
  const formatted = value.toLocaleString();
  values.value = formatted;
}

<input id="values" type="text">

Answer 4

在此之前使用输入字段发布的其他答案也可以显示其工作原理，但是当您使用toLocaleString()将其格式化为字符串后，只要输入新数字，它们就会被窃听。因此，我添加了toNumber()函数以使其更完整。在下面的示例中，我执行以下步骤：

当用户在输入字段中填写数字并离开输入字段时：呼叫toString(e)并从输入的数字中获取格式化的字符串。

如果用户再次选择输入字段，请呼叫toNumber(e)并将其格式化回数字。

这可确保您在重新选择时不会得到NaN或完全无法使用。

NaN属性表示“非数字”值。此属性表示值不是合法数字。

仍然可以在其中添加文本，这将导致NaN，因为文本无法格式化为数字。必要时，可以在toString(e)中将其过滤掉。我在下面的示例中通过添加if (formatted !== 'NaN') {}来做到这一点，只有当它不是NaN时，它将值设置为新的格式化数字。否则它什么也不会做。请注意：在这种情况下，带点的数字是字符串，因此也无法使用。

const values = document.querySelector('#values');
values.addEventListener('click', toNumber, false);
values.addEventListener('focusout', toString, false);

function toNumber(e) {
  const value = e.target.value;
  const unformatted = value.replace(/\D/g,'');
  values.value = unformatted;
}

function toString(e) {
  const value = Number(e.target.value);
  const formatted = value.toLocaleString();
  if (formatted !== 'NaN') {
     values.value = formatted; 
  }
}

<input id="values" type="text">

要解决此问题，您还可以删除我添加的内容，并在toString(e)之前添加过滤器，然后过滤点，文本等，以便仅保留数字。

在JS中格式化输入类型=“ text”

4 个答案: