jquery - 使用 jQuery 添加小数点后两位的千位分隔符

Question

目前，我所拥有的是使用 jQuery 的。

代码.html

<input type="text" class="inputnumber" name="inputnumber" value="" placeholder="">

Code.js

  $('input.inputnumber').keyup(function(event) {
    if(event.which >= 37 && event.which <= 40) return;
    $(this).val(function(index, value) {
      return value
      .replace(/\D/g, "")
      .replace(/\B(?=(\d{3})+(?!\d))/g, ",")
      ;
    });
  });

现在，我只能在输入字段中添加带有千位分隔符的数字。

1,000,000

但我的目标是允许用户添加带有 2 位小数的千位分隔符，如下所示。

1,000,000.00 

如何在我的代码中实现它？如果有人能帮助我解决这个问题，我将不胜感激。

提前致谢。

Answer 1

您当前的

/\D/g, ""

将删除所有非数字字符，包括句点。使用否定字符集，删除除数字和句点之外的所有内容，它将按预期工作:

/[^\d.]/

要限制为小数点后两位，请添加以下内容:

.replace(/\.(\d{2})\d+/, '.$1')

将(小数后跟 2 位以上数字)替换为(小数后跟 2 位数字):

$('input.inputnumber').keyup(function(event) {
  if (event.which >= 37 && event.which <= 40) return;
  $(this).val(function(index, value) {
    return value
      // Keep only digits and decimal points:
      .replace(/[^\d.]/g, "")
      // Remove duplicated decimal point, if one exists:
      .replace(/^(\d*\.)(.*)\.(.*)$/, '$1$2$3')
      // Keep only two digits past the decimal point:
      .replace(/\.(\d{2})\d+/, '.$1')
      // Add thousands separators:
      .replace(/\B(?=(\d{3})+(?!\d))/g, ",")
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="inputnumber" name="inputnumber" value="1,000,000.00">

要在开头也允许 -，请将 - 放入初始 .replace 的字符集中，并匹配和删除- 不在字符串的开头，(?!^)-:

$('input.inputnumber').keyup(function(event) {
  if (event.which >= 37 && event.which <= 40) return;
  $(this).val(function(index, value) {
    return value
      // Keep only digits, decimal points, and dashes at the start of the string:
      .replace(/[^\d.-]|(?!^)-/g, "")
      // Remove duplicated decimal points, if they exist:
      .replace(/^([^.]*\.)(.*$)/, (_, g1, g2) => g1 + g2.replace(/\./g, ''))
      // Keep only two digits past the decimal point:
      .replace(/\.(\d{2})\d+/, '.$1')
      // Add thousands separators:
      .replace(/\B(?=(\d{3})+(?!\d))/g, ",")
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="inputnumber" name="inputnumber" value="1,000,000.00">