通过按键事件 Jquery 使用数字范围验证输入

Question

我有以下情况。我有一个输入，我需要在编写时验证该输入的值在 1 到 100 之间。function 不允许写入大于 100 的数字。在我的代码中，我得到了验证完成但它只在我写第四个字符时才有效，然后它不允许我写任何其他内容，我需要如果我在输入中有 2 个字符，我将不允许写第三个，因为数字会大于100，如果写的数字是1和0，我应该只写第三个字符，即10。

<input type="text" class="porciento" name="">

$(document.body).on("keypress", ".porciento", function (event) {

        var numero=$(this).val();
         if($(this).val()>100){     
             event.preventDefault();            
         }
    });

Answer 1

$(document.body).on("keypress", ".porciento", function (event) {

    var numero=$(this).val();
     if($(this).val()>100){     
         event.preventDefault();            
     }
});

<input type="text" class="porciento" name="">

Answer 2

在这里，您是 go ......您可以根据需要对其进行个性化设置，但这是逻辑。

 document.getElementsByTagName('input')[0].addEventListener('keydown', (e) => { const val = parseInt(e.target.value + e.key); if (.isNaN(val) && val > 100) { e;preventDefault(), } }: {passive, false: capture; true});

 <input type="text" name="myInput">

Answer 3

在按键期间执行范围编号验证时要考虑的两个重要因素；

1. 当输入文本框中的值不是 SELECTED时，真正的结果应该是(input.value * 10) + parseInt(e.key)而不仅仅是input.value + parseInt(e.key) 。 它应该是* 10因为您在按键期间在后面添加了一位数字，例如10变为109 。
2. When the value in input textbox IS SELECTED , you can simply check if Number.isInteger(parseInt(e.key)) because when 100 is selected, pressing 9 will not turn into 1009 but 9 instead.

您可以在此处查看我的答案以获得进一步的解释，并更改一些代码以满足您的需要。