如何使用js限制值输入字段

Question

我正在学习js，需要帮助来解决此问题。我的问题是我尝试限制输入的最大值和最小值，加法和减法按钮很好，但是，当我在输入字段中直接输入数字时，如果数字大于或小于限制，我会想要自动返回限制范围。

例如，我的极限范围是1到10，当我在输入字段中输入11时，它将立即返回10。

我有html代码：

<button type="button" class="btn btn-default minus">
    <i class="fas fa-minus"></i>
</button>
<input id="qty2" type="text" value="1" class="qty" size="5" name="quantity" class="form-control"/>
<button type="button" class="btn btn-default btn-icon add">
   <i class="fas fa-plus"></i>
</button>

和我的js代码

<script>
    $(function () {
        $('.add').on('click',function(){
            var $qty=$(this).closest('p').find('.qty');
            var currentVal = parseInt($qty.val());
            if (!isNaN(currentVal) && currentVal < 10) {
                $qty.val(currentVal + 1);
            }
        });
        $('.minus').on('click',function(){
            var $qty=$(this).closest('p').find('.qty');
            var currentVal = parseInt($qty.val());
            if (!isNaN(currentVal) && currentVal > 1) {
                $qty.val(currentVal - 1);
            }
        });
    });
</script>

Answer 1

您可以使用onchange事件。https://www.w3schools.com/jsref/event_onchange.asp喜欢

<input id="qty2" type="text" value="1" class="qty" size="5" name="quantity" class="form-control" onchange=onInputChange(this)/>

...
function onInputChange(input) {
   if (input.value > max) {
     input.value = max;
   } else if (input.value < min) {
      input.value = min;
  }
}
...

我没有验证代码，但是应该是这样。您还可以添加事件，例如onblur来验证输入的值。

Answer 2

输入字段具有其自己的属性，即maxlength您可以提供长度并限制它的长度

<form action="/action_page.php">
   Username: <input type="text" name="usrname" maxlength="10"><br>
   <input type="submit" value="Submit">
</form>

有关更多信息，请检查此https://www.w3schools.com/tags/att_input_maxlength.asp