How do I listen for step up event for input type=“number”

Question

I want to be able to listen to step UP (increment) and step down events with jQuery. (currently I can only understand how to lis

Answer 1

There's no specific event for up and down. Your closest bet is to use the change event. You might also take a look at the oninput event but I am not sure it is supported by all browsers:

$('#myinput').on('input', function() {

});

Answer 2

For input type="number", you can use the change event, but will possibly have more cases to handle and create some clutter. I broke it down, I recommend using the "mouseup" event for the increment feature (which will mainly be used from pc) But if the user uses a device instead, I would use the event 'keyup' since the increment feature will not appear and the user will have an on-screen keyboard instead. The change event will listen for both.

For example :

$(".counter").bind('mouseup', function () { 

    if($(this).val() == undefined || $(this).val() == "")
            return; /* Exit dont bother with handling this later, if its not needed leave. */

    /* Important Check against integers and not strings. */
    /* Comparing against arrays will give unexecpted behavior, size is different then the value. */         
    var newVal = parseInt($(this).val());
    var oldVal = parseInt($(this).data('old-value'));

    if (oldVal < newVal) {      
        alert('incrementing');
    }
    else{

        alert('decrementing'); 
    }

    $(this).data('old-value', $(this).val());

});

$(".counter").bind('keyup', function () { 
    /* Similar logic */
});

I use "bind" instead of "on" or the by method "change" since "on" is a shorthand for bind.

JSFiddle Demo

Answer 3

I'm not sure if there is a listener of the stepUp and StepDown but you can externalize the PLUS and LESS buttons of the input number using:

document.getElementById("myNumber").stepUp(5); //increase the value +5
document.getElementById("myNumber").stepDown(5); // decrease the value -5

So you can finally achieve your objective!

Reference: https://www.w3schools.com/jsref/met_number_stepup.asp

NOTE: Be aware that IE11 and EDGE doesn't implement stepUp / stepDown. On my case I just remove the + and - icon and leave only the input number field. Hope EDGE die soon...

Answer 4

There is no event for up and down. You can use change event

$(".counter").change(function () {
   alert($(this).val());      
})

DEMO

You can try something like, You can store previous value and compare with currently value and identify up or down

$(".counter").change(function () {
    if ($(this).data('old-value') < $(this).val()) {
        alert('Alert up');
    } else {
        alert('Alert dowm');
    }
    $(this).data('old-value', $(this).val());
})

DEMO

Answer 5

You should do this:

var $counter = $("your_counter");
var number = $counter.val();

$counter.change(function () {
   if($counter.val() > number)
       alert('up');
   else
       alert('down');
   number = $counter.val();
});

Here is the demo: http://jsfiddle.net/6bb8S/