I have an input of type="number" where I want to get the numeric value of the input on any type of change. I'm using the .on() method to handle the change events. The types change events that I am concerned with are:
- Clicking the up and down arrows on the input field with the mouse
- Entering a number with the keyboard
- Using the up and down arrows on the keyboard
- Using the mouse wheel
Currently with the code I have, the first three types of changes get recorded correctly, but the wheel change is always one off the expected value.
Question: Can somebody explain to me why the value of the input is incorrect on the mouse wheel change, but not on the other types of changes and how I could fix this?
$("#elementId:input").on('keyup mouseup wheel', function () {
var additionMemberCount = $('#elementId:input').val()
console.log(additionMemberCount);
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="number" id="elementId" min="4" placeholder="4+">