允许在长度受限的字段中替换数字

Question

我正在使用正则表达式来验证数字字段。这仅允许字段中包含数字，并且最大长度为 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

要让该字段仅显示整数，然后允许下一个按下的整数强制从值中提取最旧的字符，或者通过选择它们来替换它们，您可以使用正则表达式替换非数字字符和 slice() 在 @ 987654322@事件处理程序，像这样：

$('.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" />