Блог

Резюме: я создаю форму, которая имеет много входных данных, некоторые из которых должны принимать только целочисленное значение. Эти входные данные имеют класс int-val , на который я ссылаюсь в своем Js.

Я настраиваю входные данные int так, чтобы после каждого третьего целого числа включались запятые keyup . Мне это удалось, но теперь this.value сбрасывается после четвертого символа keyup , и я не уверен, почему.

Усилие: вот как выглядит мой код:

 function addComma(x) {
   return x.toLocaleString('en');
}

// add function to int inputs
$('.int-val').keyup(function (e) {
   let val = parseFloat(this.value);
   this.value = addComma(val);
   console.log(this.value);
}
  

В консоли вывод для ‘4500000’ выглядит следующим образом:

 4
45
450
4,500
4 // if adding a fifth character, this.value resets to the first character entered
  

Это оказывается сложнее, чем я ожидал. Есть ли более простой способ добиться этого?

Это происходит потому, что вы анализируете локализованное число 4,500 и , оно не поддерживается, поэтому parseFloat выбрасывает все после неподдерживаемого символа (the , ).

Встроенного метода для анализа локализованных чисел не существует.

Для этой конкретной локализации, которую вы используете, вы могли бы сделать parseFloat(this.value.replace(/,/g,'')); , и вы бы решили проблему.

 function addComma(x) {
  return x.toLocaleString('en');
}

// add function to int inputs
$('.int-val').keyup(function(e) {
  let val = parseFloat(this.value.replace(/,/g, ''));
  this.value = addComma(val);
  console.log(this.value);
})  

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

<input type="text" class="int-val" />  

Вам все равно придется обрабатывать десятичные дроби и пустые строки.

Взгляните на https://github.com/globalizejs/globalize для более надежного подхода