添加逗号时删除数字的问题

Question

我想使用以下代码向用户输入的值添加逗号

​

$("#youpay").on('keyup', function() {
  if (event.which >= 37 && event.which <= 40) return;

  // format number
  $(this).val(function(index, value) {
    return value
      .replace(/\D/g, "")
      .replace(/\B(?=(\d{3})+(?!\d))/g, ",");
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input class="form-control english text-center" id="youpay" type="number">

​

但问题是，当输入长度达到4时，输入值被清除。我在另一个部分使用了这段代码，这不是一个问题，但我不知道这里的问题是什么。

Answer 1

如果您修改了代码，以便在替换后立即记录新值(即将放入输入)，例如：

​

$("#youpay").on('keyup', function() {
  if (event.which >= 37 && event.which <= 40) return;

  // format number
  $(this).val(function(index, value) {
    const newValue = value
      .replace(/\D/g, "")
      .replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    console.log(`${value} is replaced by ${newValue}`);
    return newValue;
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input class="form-control english text-center" id="youpay" type="number">

​

..。您将看到替换实际上是正确的：1111被1,111替换，等等。这里的真正原因不是JS，而是HTML。

请看，将type="number"应用于输入应该简化用户输入验证，但对添加非数字字符的修饰不太好。引用医生的话

重要:请记住，在逻辑上，您不应该能够在数字输入以外的数字中输入字符。浏览器之间似乎对此存在一些分歧，参见bug 1398528。

特别是，任何向<input type="number">提供非纯数字字符串作为其值的尝试都会导致整个值被丢弃。这就是为什么在输入第四个数字后会看到空字符串的原因。