Question

目前，我使用的是jQuery。

Code.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.]/

要还限制为小数点后2位，请同时添加此小数：

.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">

使用jQuery添加带有2个小数位的千位分隔符

1 个答案: