Detecting input change in jQuery

Question

When using jquery  change on an input the event will only be fired when the input loses focus  In my case  I need to make a call to the service  check if value is valid  as soon as the input value is changed  How could I accomplish this

User · Answer

There are jQuery events like keyup and keypress which you can use with input HTML Elements  You could additionally use the blur   event

User · Answer

If you ve got HTML5    oninput  fires only when a change actually happens  but does so immediately    Otherwise you need to check for all these events which might indicate a change to the input element s value    onchange  onkeyup  not keydown or keypress as the input s value won t have the new keystroke in it yet  onpaste  when supported    and maybe    onmouseup  I m not sure about this one

User · Answer

With HTML5 and without using jQuery  you can using the input event   var input   document querySelector  input     input addEventListener  input   function         console log  input changed to     input value         This will fire each time the input s text changes   Supported in IE9  and other browsers   Try it live in a jsFiddle here

User · Answer

This covers every change to an input using jQuery 1 7 and above       inputElement   on  input   null  null  callbackFunction

User · Answer

blur is triggered when element loses focus      target   blur function       alert   this  val              To trigger manually use       target   blur

User · Answer

UPDATED for clarification and example  examples  http   jsfiddle net pxfunc 5kpeJ   Method 1  input event  In modern browsers use the input event   This event will fire when the user is typing into a text field  pasting  undoing  basically anytime the value changed from one value to another   In jQuery do that like this      someInput   bind  input   function            this  val      get the current value of the input field        starting with jQuery 1 7  replace bind with on       someInput   on  input   function            this  val      get the current value of the input field        Method 2  keyup event  For older browsers use the keyup event  this will fire once a key on the keyboard has been released  this event can give a sort of false positive because when  w  is released the input value is changed and the keyup event fires  but also when the  shift  key is released the keyup event fires but no change has been made to the input     Also this method doesn t fire if the user right-clicks and pastes from the context menu       someInput   keyup function           this  val      get the current value of the input field        Method 3  Timer  setInterval or setTimeout   To get around the limitations of keyup you can set a timer to periodically check the value of the input to determine a change in value   You can use setInterval or setTimeout to do this timer check   See the marked answer on this SO question  jQuery textbox change event or see the fiddle for a working example using focus and blur events to start and stop the timer for a specific input field

User · Answer

As others already suggested  the solution in your case is to sniff multiple events  Plugins doing this job often listen for the following events    input on  change keydown keypress keyup mousedown click mouseup   handler    If you think it may fit  you can add focus  blur and other events too  I suggest not to exceed in the events to listen  as it loads in the browser memory further procedures to execute according to the user s behaviour   Attention  note that changing the value of an input element with JavaScript  e g  through the jQuery  val   method  won t fire any of the events above   Reference  https   api jquery com change

User · Answer

If you want the event to be fired whenever something is changed within the element then you could use the keyup event

[javascript] Detecting input change in jQuery?

Examples related to javascript

Examples related to jquery

Examples related to html