Как динамически автоматически форматировать номер в американской валюте только с помощью jQuery?

Question

Я создаю форму, и мне нужно иметь текстовое поле, в котором пользователь может ввести цены или сборы.

Я видел форму, которая может делать то, что я ищу, но я не знаю, как это сделать. То, что я ищу, по умолчанию, текстовое поле содержит $ 0.00. Когда пользователь начинает вводить номер, он действует следующим образом: 12345678 начинается с 0,01> 0,12> 1,23> ---> $ 123,456.78

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

Также необходимо блокировать возможность ввода нечислового символа, отличного от запятой и периодом. Поэтому, если пользователь должен был ввести «a», вместо отображаемого «a», а затем внезапно удалить, я даже не хочу видеть «a».

Answer 1

Я бы начал с предложения <input type="number"/>, чтобы ограничить ввод только числами. Далее, это регулярное выражение для обработки двух знаков после запятой и запятых.

var money = number.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '$1,'); 

Где number номер, который вы получите на KeyUp. Это должно работать при вызове ввода.

$('input[type="number"]').on('keyup', function(e){ 
    var number = Number($(this).val()); 
    var money = number.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '$1,'); 
    $(this).val(money); 
}); 

Эта часть является только началом. Есть несколько условных выражений, которые вам нужно будет ввести. Например, вы можете проверить ключ, который был нажат, прежде чем разрешить изменение. Вы можете сделать это, проверив keycodes.