Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

I want to be able to listen to <input type="number" /> step UP (increment) and step down events with jQuery. (currently I can only understand how to listen to change event)

enter image description here

like image 630
Oleg Tarasenko Avatar asked Feb 09 '14 17:02

Oleg Tarasenko


People also ask

How do I add event listener to input box?

How it works: First, select the <input> element with the id message and the <p> element with the id result . Then, attach an event handler to the input event of the <input> element. Inside the input event handler, update the textContent property of the <p> element.

What is step in number input?

The step attribute specifies the interval between legal numbers in an <input> element. Example: if step="3" , legal numbers could be -3, 0, 3, 6, etc. Tip: The step attribute can be used together with the max and min attributes to create a range of legal values.

How do you input an event?

Event: inputThe input event triggers every time after a value is modified by the user. Unlike keyboard events, it triggers on any value change, even those that does not involve keyboard actions: pasting with a mouse or using speech recognition to dictate the text.

How do you increment numbers in HTML?

The stepUp() method increments the value of the number field by a specified number. Tip: To decrement the value, use the stepDown() method.


1 Answers

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

like image 159
Satpal Avatar answered Sep 22 '22 18:09

Satpal