Проверяйте числа до и после десятичного числа при нажатии клавиши

Question

Я пытаюсь проверить десятичное число, состоящее из 13 цифр до и 4 цифр после десятичной точки при нажатии клавиши, исключая запятую, т. Е. Запятая не должна учитываться как цифра.

Допустимые случаи

1,234,567,890,123.1234

1234567890123.1234

123456789012.1234

1234567890123.123

12345.123

1.2

0

В действительных случаях

12345abc.23 // string or special characters  not allowed

1,234,567,890,1231.1234

1,234,567,890,123.12341

12345678901231.1234

1234567890123.12341

Текущее регулярное выражение

^[0-9]{0,13}.?[0-9]{0,4}$

Код

 $("#Price").keydown(function (e) {

  var userVal =  $("#Price").val().replace(/,/g, ""); // remove commas

  var validValue = userVal.search(/^[0-9]{0,13}.?[0-9]{0,4}$/) == 0 ? true : false;

  if (userVal !== "" && !validValue && e.keyCode !== 46 && e.keyCode !== 8) {        

     e.preventDefault();

  }
  else {

     return true;
  }

});

Приведенный выше код regex отлично работает в консоли браузера:

var userVal = "1234567890123.1234";

var validValue = userVal.search(/^[0-9]{0,13}.?[0-9]{0,4}$/) == 0 ? true : false;

console.log(validValue);

Но при использовании событий keypress, keydown и keyup пользователь по-прежнемувозможность ввода 1 дополнительной цифры до и после десятичной дроби.

Как я могу запретить пользователю вводить неверные регистры?

Answer 1

Поскольку keydown срабатывает до , символ фактически вводится во ввод.Смотрите эту скрипку, где я добавил выходы: https://jsfiddle.net/n56k0ve3/

<input id='price' type='text' value='0'></input>
<hr>
<span id='userVal'></span>
<br>
<span id='validValue'></span>


$("#price").keydown(function(e) {

  var userVal =  $(this).val().replace(/,/g, ""); // remove commas

  var validValue = userVal.search(/^[0-9]{0,13}\.?[0-9]{0,4}$/) == 0 ? true : false;

  $("#userVal").text(userVal);
  $("#validValue").text(validValue);

  if (userVal !== "" && !validValue && e.keyCode !== 46 && e.keyCode !== 8) {
     e.preventDefault();
  } else {
     return true;
  }
});

Вместо этого используйте событие, которое проверяет значение после его изменения.keyup работает, но не срабатывает до тех пор, пока символ не отображается на входе, а также срабатывает без необходимости, например, при Shift или Ctrl .Вместо этого мы можем использовать событие input.Смотрите эту скрипку: https://jsfiddle.net/2b6pc1hu/

var prevVal = $("#price").val();

$("#price").on('input', function(e) {

  var val = $(this).val();

  var userVal =  val.replace(/,/g, ""); // remove commas

  var validValue = userVal.search(/^[0-9]{0,13}\.?[0-9]{0,4}$/) == 0 ? true : false;

  $("#userVal").text(userVal);
  $("#validValue").text(validValue);

  if (userVal !== "" && !validValue && e.keyCode !== 46 && e.keyCode !== 8) {
     $(this).val(prevVal);
  } else {
    prevVal = val;
  }
});

Кроме того, в регулярных выражениях . является подстановочным знаком.Этого следует избегать, если вы хотите, чтобы он занимал только точку / десятичное число.