用户写出超出范围的值后如何立即发出警报

Question

我想在用户输入超出范围的值而不是在表单的提交按钮后立即发出警报。

<input type="number" name="interest_rate" min="5" max="20" maxlength="2" onclick="box()" id="input2" class="form-control" placeholder="Enter Interest Rate" required>

    function box(){

    var check=parseInt((document.getElementById('input2').value));

    if((check<5) || (check>20))
        {
        alert("Please enter in range between 5 to 20");
        }

}

Answer 1

尝试使用onblur或oninput事件而不是onclick来尝试，因为使用您的数字范围 min = 5 和 max = 20 < / strong>，则无法使用alert()或onchange

来调用onclick

function box() {

  var check = parseInt((document.getElementById('input2').value));

  if ((check < 5) || (check > 20)) {
    alert("Please enter in range between 5 to 20");
  }

}

<input type="number" name="interest_rate" min="5" max="20" maxlength="2" oninput="box()" id="input2" class="form-control" placeholder="Enter Interest Rate" required>

Answer 2

您要使用onkeydown事件侦听器

该监听器将在您开始输入时立即做出反应

 <input type="number" name="interest_rate" min="5" max="20" maxlength="2" onkeydown="box()" id="input2" class="form-control" placeholder="Enter Interest Rate" required>


 <script>
    function box(){

       var check=parseInt((document.getElementById('input2').value));

       if((check<5) || (check>20)){
          alert("Please enter in range between 5 to 20");
       }
    }
 </script>