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

如果您希望用户输入数字，并且应该不需要JavaScript来限制最小值和最大值，则应该使用input的html type="number"标签。您只需要将属性添加到html标签即可。

<input id="myNumber" type="number" min="1" max="10">

考虑到您问如何使用javascript ，下面是onchange事件

的演示

function myFunction() {
  var x = document.getElementById("myNumber").value;
  document.getElementById("demo").innerHTML = "You selected: " + x;
}

<p>Choose a number between 1 and 10</p>
<input id="myNumber" type="number" onchange="myFunction()">

<p id="demo"></p>

如何使用JS对值输入字段进行限制

2 个答案: