Может ли jQuery добавлять запятые при вводе чисел пользователем?

Как мне динамически добавлять запятые, когда пользователь вводит числа? Есть ли хороший форматтер чисел, который бы помог? Я должен добавить эти числа позже, поэтому в конце концов мне придется убрать запятые в строке. Но на экране должны отображаться запятые для лучшей читаемости.


jquery jquery-plugins
person Matt    schedule 13.04.2010    source источник
comment
Так подождите, вы хотите, чтобы после каждого числа добавлялась запятая? Так что, набрав 123456, я получу 1,2,3,4,5,6? Или вы просто заменяете пробелы запятыми?   -  person Tim Meers    schedule 13.04.2010
comment
как отвечает Мацек, он, скорее всего, хочет добавить разделители тысяч.   -  person Adriano Varoli Piazza    schedule 13.04.2010

Ответы (2)


arrow_upward
99
arrow_downward

Запустите фрагмент кода, чтобы убедиться, что он работает

$('input.number').keyup(function(event) {

  // skip for arrow keys
  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://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<input class="number">

person maček    schedule 13.04.2010
comment
Вы можете просто пропустить необходимость повторного вызова jQuery в функции keyup, просто используя это повсюду. Затем замените var num = $ this.val (). Replace () на this.value.replace () и $ this.val (num.replace ()) на this.value = num.replace (). - person Bob; 14.04.2010
comment
@Bob, я ценю ваш вклад, но использование методов jQuery за счет вызова $() широко распространено в сообществе jQuery. Именно поэтому почему jQuery в первую очередь имеет доступные методы. - person maček; 14.04.2010
comment
Я просто пробовал этот кусок кода, а в Chrome и FF запятые не помещаются на 1 место. Например, 1234 - ›1234 и 12345 -› 1,2345. - person StoicLoofah; 25.02.2013
comment
@ maček, можете ли вы решить проблему в этом коде, если я использую обратный пробел, запятая должна быть в точном положении. jsfiddle.net/23Ccf - person Naveed; 08.07.2013
comment
@Naveed (и все остальные), это давно пора, но я внес изменения в этот код, чтобы сделать его более надежным. Регулярное выражение было улучшено, чтобы устранить некоторые проблемы. Это также позволяет пользователю нажимать клавишу возврата, и запятые остаются правильными. - person maček; 08.07.2013
comment
Именно то, что я искал - person vegas2033; 19.04.2017
comment
не работает, когда ввод объявлен type = number :( - person Brian; 10.03.2018
comment
@ maček Есть ли способ, если это сработает, если input type="number"? - person ; 23.04.2018
comment
@BrianVanegasParra Удалось ли вам это сделать, если input type="number"? - person ; 23.04.2018
comment
@ maček, как это сделать, включая десятичные знаки? - person Azis; 19.07.2018
comment
Это работает, только если мне не нужно вставлять десятичные дроби. - person user2342558; 30.06.2021

arrow_upward
4
arrow_downward

Вот реализация ответа @ maček на ванильном JS, если вы не хотите использовать jQuery:

var el = document.querySelector('input.number');
el.addEventListener('keyup', function (event) {
  if (event.which >= 37 && event.which <= 40) return;

  this.value = this.value.replace(/\D/g, '')
                         .replace(/\B(?=(\d{3})+(?!\d))/g, ',');
});
<input class="number">

person aboutaaron    schedule 23.12.2016
comment
Я могу ввести здесь только 4 цифры, по любой конкретной причине, потому что у меня будет более 4 цифр, спасибо - person parlad; 19.07.2017
comment
Это работает, только если мне не нужно вставлять десятичные дроби. - person user2342558; 30.06.2021