Подтвердите десятичное значение 2dp с помощью регулярного выражения

Question

Мой код работает до сих пор, но я не могу вводить числа, когда ОБА установлены десятичные знаки.Есть идеи, что не так?

$("input").keypress(function(e) {
  var el = $(this);
  var key = e.keyCode || e.which;
  key = String.fromCharCode(key);
  var value = el.val() + key;
  var regex = /^\d+(,\d{0,2})?$/;
  if (!regex.test(value)) {
    e.returnValue = false;
    if (e.preventDefault) e.preventDefault();
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" value="1234,56">

Answer 1

Ваш код также будет отклонять нажатие клавиш Backspace, Delete и Arrow, что сделает почти невозможным для пользователя исправление уже набранного номера.

Я бы предложил не отвечать на keypress, нона событие input, поскольку оно также срабатывает, когда изменения вносятся с помощью мыши (перетаскивание текста), контекстного меню (очистка, вставка) или других устройств ввода.

Разница в том, что input срабатывает после внесения изменений, но это не так уж плохо.Вы можете просто удалить часть ввода, которая не соответствует регулярному выражению:

$("input").on('input', function(e){
    var clean = $(this).val().replace(/^(\d+(,\d{0,2})?)?.*/g, "$1");
    $(this).val(clean);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" value="1234,56">

Приведенное выше решение удаляет оставшуюся часть ввода, которая следует после символа, нарушающего шаблон.Если вы хотите сохранить как можно больше входных символов, вы можете выполнить цикл, в котором вы удаляете только один символ-нарушитель за раз:

$("input").on('input', function(e){
    var clean = $(this).val(), input;
    while (input != clean) {
        input = clean;
        clean = input.replace(/^(\d+(,\d{0,2})?)?.?/g, "$1");
    }
    $(this).val(clean);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" value="1234,56">