onchange event for input type="number"
Use mouseup and keyup
$(":input").bind('keyup mouseup', function () {
alert("changed");
});
http://jsfiddle.net/XezmB/2/
The oninput
event (.bind('input', fn)
) covers any changes from keystrokes to arrow clicks and keyboard/mouse paste, but is not supported in IE <9.
jQuery(function($) {
$('#mirror').text($('#alice').val());
$('#alice').on('input', function() {
$('#mirror').text($('#alice').val());
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="alice" type="number" step="any" value="99">
<p id="mirror"></p>
http://jsfiddle.net/XezmB/8/
$(":input").bind('keyup change click', function (e) {
if (! $(this).data("previousValue") ||
$(this).data("previousValue") != $(this).val()
)
{
console.log("changed");
$(this).data("previousValue", $(this).val());
}
});
$(":input").each(function () {
$(this).data("previousValue", $(this).val());
});
This is a little bit ghetto, but this way you can use the "click" event to capture the event that runs when you use the mouse to increment/decrement via the little arrows on the input. You can see how I've built in a little manual "change check" routine that makes sure your logic won't fire unless the value actually changed (to prevent false positives from simple clicks on the field).
To detect when mouse or key are pressed, you can also write:
$(document).on('keyup mouseup', '#your-id', function() {
console.log('changed');
});
$(':input').bind('click keyup', function(){
// do stuff
});
Demo: http://jsfiddle.net/X8cV3/