onchange event for input type number

Question

How can I handle an onchange for  lt input type  number  id  n  value  5  step   5    gt    I can t do a keyup or keydown  because  the user may just use the arrows to change the value   I would want to handle it whenever it changes  not just on blur  which I think the  change   event does   Any ideas

User · Answer

I had same problem and I solved using this code

HTML

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

You can add just 3 first lines the others parts is 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/

User · Answer

Use mouseup and keyup      input   bind  keyup mouseup   function          alert  changed                      http   jsfiddle net XezmB 2

User · Answer

input   bind  click keyup   function           do stuff       Demo  http   jsfiddle net X8cV3

User · Answer

Because    input type  number     doesn t work on IE  we should use a class name or id  for example      input quantity     And don t use  bind   method  The  on   method is the preferred method for attaching event handlers to a document   So  my version is   HTML   lt input type  number  value  5  step   5  min  1  max  999  id  txt quantity  name  txt quantity  class  input quantity  gt    jQuery   lt script gt    document  ready function            input quantity   on  change keyup   function             console log  nice                  lt  script gt

User · Answer

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

User · Answer

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 s a working example   It simply binds an event handler to the keyup  change and click events  It checks whether or not the value has changed  and if so  stores the current value so it can check again next time  The check is required to deal with the click event

User · Answer

To detect when mouse or key are pressed  you can also write     document  on  keyup mouseup     your-id   function                                                                                                                            console log  changed

User · Answer

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

User · Answer

The oninput event   bind  input   fn   covers any changes from keystrokes to arrow clicks and keyboard mouse paste  but is not supported in IE  lt 9    x000D   x000D  jQuery function      x000D        mirror   text     alice   val     x000D   x000D        alice   on  input   function     x000D          mirror   text     alice   val     x000D        x000D      x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt  x000D   x000D   lt input id  alice  type  number  step  any  value  99  gt  x000D   x000D   lt p id  mirror  gt  lt  p gt  x000D   x000D   x000D

User · Answer

lt input type  number  id  n  value  0  step   5    gt   lt input type  hidden  id  v  value    0   gt    lt script gt      n   bind  keyup mouseup   function          var current       n   val        var prevData       v   val         if current  gt  prevData    current  lt  prevData              v   val current          var newv       v   val            alert newv                 lt  script gt       http   jsfiddle net patrickrobles53 s10wLjL3       I ve used a hidden input type to be the container of the previous   value that will be needed for the comparison on the next change

[jquery] onchange event for input type="number"

Examples related to jquery

Examples related to html