Unexpected number input type behavior and jquery.on ('change') function in Chrome
I have a number input type and a jQuery function .on('change')
that runs every time the input value changes.
When using chrome, if you continuously press the arrows on the input to increase or decrease the value (leaving the mouse inside the arrow clicked area), the function fires for the first few times and then just stops. If you then move your mouse outside of the arrow-clicked area, then the JavaScript function is triggered.
Does anyone know how I can handle this please? Or if there is some work around.
See example below.
$('#number').on('change', function(){
console.log('change');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number" id="number"/>
source to share
Well, it's pretty easy to avoid. Change
fires only when the item loses focus
. But basically you are here click
, so use this event and keyup
in case someone is using keyboard to enter value.
Here's a working fiddle:
$('#number').on('keyup click', function(){
console.log('change');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number" id="number"/>
source to share
Another event that works well is input
. This fires every time the input changes (be it a key press or a key input):
$('#number').on('input', function(){
console.log('change');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number" id="number"/>
source to share