thousand and decimal separate in key up event

Question

I used below code to thousand and decimal separate in key up event. But after entering 15 digits value gets 0. what will be the reason ??

<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

Problem:

The problem here is that you reached the maximum possible value for Number on parseInt() when it tries to parse the input string value, check the Number.MAX_SAFE_INTEGER MDN Reference for further details.

So all the extra digits you enter, when the number exceeds the Number.MAX_SAFE_INTEGER, will be ignored and transformed to 0. Please check Working with large integers in JavaScript tutorial for more explanation and examples.

So, you can't treat a large number value as a Number in Javsacript because there's a Maximum possible value limit, you need to treat it as a string, so it can exceed this max value.

Solution:

The solution here is to treat this number as a string and use Regex and .replace() method to change its format.

Here's a solution that I wrote before and that I always use to format numbers, it will solve your problem:

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;
};

Demo:

This is a working Fiddle with your original code.