Onchange for input type = "number"

Question

How can I handle onchange for <input type="number" id="n" value="5" step=".5" /> ? I cannot do keyup or keydown because the user can simply use the arrows to change the value. I would like to process it whenever it changes, and not just the blur, which, in my opinion, has the .change() event. Any ideas?

Answer 1

Use mouse and keyboard

 $(":input").bind('keyup mouseup', function () { alert("changed"); }); 

http://jsfiddle.net/XezmB/2/

Answer 2

The oninput event ( .bind('input', fn) ) covers any changes from keystrokes to arrow clicks and keyboard / mouse inserts, 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> 

Answer 3

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()); });​ 

It's a bit of a ghetto, but in this way you can use the “click” event to capture an event that is executed when you use the mouse to zoom in / out with the small arrows on the input. You can see how I built a small manual procedure for checking changes, which ensures that your logic will not work if the value does not actually change (to prevent false positives from simple clicks in the field).

Answer 4

To determine if a mouse or key is pressed, you can also write:

 $(document).on('keyup mouseup', '#your-id', function() { console.log('changed'); }); 

Answer 5

 $(':input').bind('click keyup', function(){ // do stuff }); 

Demo: http://jsfiddle.net/X8cV3/

Answer 6

There may be a better solution, but this is what came to mind:

 var value = $("#yourInput").val(); $("#yourInput").on('keyup change click', function () { if(this.value !== value) { value = this.value; //Do stuff } }); 

Here is a working example .

It simply binds the event handler to the keyup , change and click events. It checks to see if the value has changed, and if so, it saves the current value so that he can check it again next time. To check the click event, a check is required.

Answer 7

 $("input[type='number']").bind("focus", function() { var value = $(this).val(); $(this).bind("blur", function() { if(value != $(this).val()) { alert("Value changed"); } $(this).unbind("blur"); }); }); 

OR

 $("input[type='number']").bind("input", function() { alert("Value changed"); }); 

Answer 8

 <input type="number" id="n" value="0" step=".5" /> <input type="hidden" id="v" value = "0"/> <script> $("#n").bind('keyup mouseup', function () { var current = $("#n").val(); var prevData = $("#v").val(); if(current > prevData || current < prevData){ $("#v").val(current); var newv = $("#v").val(); alert(newv); } }); </script> 

http://jsfiddle.net/patrickrobles53/s10wLjL3/

I used the hidden input type as a container of the previous value, which will be needed for comparison at the next change.

Answer 9

Since $("input[type='number']") does not work in IE, we must use the class name or id, for example $('.input_quantity') .

And do not use the .bind() method. The .on() method is the preferred method for attaching event handlers to a document.

So my version is:

HTML

 <input type="number" value="5" step=".5" min="1" max="999" id="txt_quantity" name="txt_quantity" class="input_quantity"> 

JQuery

 <script> $(document).ready(function(){ $('.input_quantity').on('change keyup', function() { console.log('nice'); }); }); </script> 

Answer 10

I had the same problem and decided to use this code

HTML

 <span id="current"></span><br> <input type="number" id="n" value="5" step=".5" /> 

You can add only 3 first lines, other parts are optional.

 $('#n').on('change paste', function () { $("#current").html($(this).val()) }); // here when click on spinner to change value, call trigger change $(".input-group-btn-vertical").click(function () { $("#n").trigger("change"); }); // you can use this to block characters non numeric $("#n").keydown(function (e) { // Allow: backspace, delete, tab, escape, enter and . if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 110, 190]) !== -1 || (e.keyCode === 65 && e.ctrlKey === true) || (e.keyCode >= 35 && e.keyCode <= 40)) return; if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) e.preventDefault(); }); 

Example here: http://jsfiddle.net/XezmB/1303/