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

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

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

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

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

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

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

User · Answer

I had same problem and I solved using this code  HTML   lt span id  current  gt  lt  span gt  lt br gt   lt input type  number  id  n  value  5  step   5    gt    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  amp  amp  e ctrlKey     true      e keyCode  gt   35  amp  amp  e keyCode  lt   40               return       if   e shiftKey     e keyCode  lt  48    e keyCode  gt  57    amp  amp   e keyCode  lt  96    e keyCode  gt  105           e preventDefault          Example here   http   jsfiddle net XezmB 1303

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

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

User · Answer

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

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

Examples related to jquery

Examples related to html