按键事件中的千位和小数分开

Question

我使用下面的代码在按键事件中将千位和小数分开。但是输入15位后数值变成0，请问是什么原因？？

<script>
var myinput = document.getElementById('myinput');

myinput.addEventListener('keyup', function() {
  var val = this.value;
  val = val.replace(/[^0-9\.]/g,'');
  
  if(val != "") {
    valArr = val.split('.');
    valArr[0] = (parseInt(valArr[0],10)).toLocaleString();
    val = valArr.join('.');
  }
  
  this.value = val;
});

</script>

<input id="myinput" type="text'>

Answer 1

问题：

这里的问题是当它试图解析输入 string 值时，您在 parseInt() 上达到了 Number 的最大可能值，请检查 Number.MAX_SAFE_INTEGER MDN Reference更多详情。

所以你输入的所有额外数字，当数字超过Number.MAX_SAFE_INTEGER, will be ignored and transformed to 0. Please check Working with large integers in JavaScript tutorial更多的解释和例子。

因此，您不能将大的 number 值视为 Javasacript 中的 Number，因为存在最大可能值限制，您需要将其视为 string，所以它可以超过这个最大值 value.

解法：

这里的解决办法是把这个number当作一个string，用Regex和.replace()的方法来改变它的格式。

这是我以前写的，我经常用它来格式化数字，它会解决你的问题：

var formatNumber = function(input, fractionSeparator, thousandsSeparator, fractionSize) {

  fractionSeparator = fractionSeparator || '.';
  thousandsSeparator = thousandsSeparator || ',';
  fractionSize = fractionSize || 3;
  var output = '',
    parts = [];

  input = input.toString();
  parts = input.split(".");
  output = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, thousandsSeparator).trim();
  if (parts.length > 1) {
    output += fractionSeparator;
    output += parts[1].substring(0, fractionSize);
  }
  return output;
};

演示：

这是一个有效的 Fiddle 与您的原始代码。

按键事件中的千位和小数分开

thousand and decimal separate in key up event

javascript

string

numbers

keyup