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">

In this kind the script works, but I want to use keydown , it prevents entering more or less than the maximum and minimum value, but keyup gives more or less typing if the user presses and holds the button. What could be the reason that keydown is not working? I can remove the value, make it more than 10, etc.

Let me know if you need more information.

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">