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

Posted 2023-05-09

【中文标题】允许在长度受限的字段中替换数字

【英文标题】：Allow digits to be replaced in a length-limited field

【发布时间】：2020-11-25 09:43:05

【问题描述】：

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

【参考方案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" />

【讨论】：

但即使在达到长度后，它也会继续获取数字。达到 3 个数字后，它会替换前 3 个数字

没错。要允许替换号码，您必须这样做。另一种选择是您拥有的逻辑，它要求用户首先删除该号码。

在我的解决方案中，您认为这是预期的行为。我认为它是正确的，但 QA 认为它应该模仿两个数字的行为。当我们选择数字并输入 anthing 它应该替换值

更新 - 我用 .slice(0,3) 替换了 .slice(-3) ，现在它工作正常。感谢您的帮助:)