Разрешить замену цифр в поле с ограниченной длиной

Question

Я использую Regex для проверки числового поля. Это позволяет вводить только числа в поле, а максимальная длина составляет 3 символа. Всякий раз, когда в поле есть 1 или 2 символа, и я выбираю их, дважды щелкнув по ним, я могу изменить номер, просто нажав любое другое число.

Однако, когда значение содержит 3 числа, то есть максимальная длина поля, когда я выбираю номер и пытаюсь ввести другой номер, он не работает; Я не могу ничего ввести.

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

// Restricting negative numbers and special characters from qyt field and maximum digits to 3
$('.js-bundle-qty').on('keypress', function(event) {
  if (event.keyCode != 8) {
    console.log('demo');
    var regex = new RegExp("^[0-9]{0,3}$");
    var inputValue = String.fromCharCode(!event.keyCode ? event.which : event.keyCode);
    var key = $(this).val();
    key = key + inputValue;
    if (!regex.test(key)) {
      console.log('enter');
      event.preventDefault();
      return false;
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="number" class="js-bundle-qty" max="999">

https://jsfiddle.net/sanket4real/310sgheL/30/

Answer 1

Чтобы поле отображало только целые числа, а затем позволяло следующему нажатому целому числу принудительно устанавливать самый старый символ из значения или заменять их путем выбора, вы можете использовать регулярное выражение для замены не-di git символов и slice() в обработчике событий input, например:

$('.js-bundle-qty').on('input', function() {
  $(this).val((i, v) => v.replace(/[^0-9]/g, '').slice(-3));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="number" class="js-bundle-qty" max="999" length="3" />