javascript - Why keyup works but keydown does not work

Question

I have an input type="number" where the min value is 1, the max is 10. I want to prevent inputting a value greater or less than max and min, so I use this script:

$('input[name=inputModal1]').keyup(function(){
if($(this).val()>10){
  $(this).val(10);
}else if($(this).val()<1){
  $(this).val(1);}
});
$('input[name=inputModal2]').keydown(function(){
if($(this).val()>10){
  $(this).val(10);
}else if($(this).val()<1){
  $(this).val(1);}
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="number" name="inputModal1" min="1" max="10" value="1">
<input type="number" name="inputModal2" min="1" max="10" value="1">

Answer 1

The issue is to do with the order of events. keydown fires on the element before the value has been set. Therefore $(this).val() is '' when the event fires, which confuses your logic.

To fix this issue, and improve the behaviour, use the input event instead. This works as you require, and also fires when the user adds content to the element in any way - pasting via the mouse for example.

In addition you can use Math.min() and Math.max() to make your logic more succinct. Try this:

$('input[name=inputModal]').on('input', function() {
  $(this).val((i, v) => Math.max(Math.min(this.value, 10), 0));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="number" name="inputModal" min="1" max="10">