Can jQuery check whether input content has changed

Question

Is it possible to bind javascript  jQuery is best  event to  change  form input value somehow    I know about  change   method  but it does not trigger until you  the cursor  leave s  the input field  I have also considered using  keyup   method but it reacts also on arrow keys and so on    I need just trigger an action every time the text in the input changes  even if it s only one letter change

User · Answer

I don t think there s a  simple  solution  You ll probably need to use both the events onKeyUp and onChange so that you also catch when changes are made with the mouse  Every time your code is called you can store the value you ve  seen  on this seenValue attached right to the field  This should make a little easier

User · Answer

I had to use this kind of code for a scanner that pasted stuff into the field    document  ready function       var tId oldVal        fieldId   focus function          oldVal       fieldId   val         tId setInterval function            var newVal       fieldId   val           if  oldVal  newVal  oldVal newVal        someaction     100               fieldId   blur function    clearInterval tId           Not tested

User · Answer

You can employ the use of data in jQuery and catch all of the events which then tests it against it s last value  untested      document  ready function               fieldId   bind  keyup keydown keypress change blur   function             if    this  val      jQuery data this   lastvalue              alert  changed                      jQuery data this   lastvalue     this  val                   This would work pretty good against a long list of items too  Using jQuery data means you don t have to create a javascript variable to track the value  You could do     fieldId1   fieldId2   fieldId3   fieldId14  etc   to track many fields   UPDATE  Added blur to the bind list

User · Answer

You can also store the initial value in a data attribute and check it against the current value   lt input type  quot text quot  name  quot somename quot  id  quot id someid quot  value  quot  quot  data-initial  quot your initial value quot    gt       quot  id someid quot   keyup function         return   this  val        this  data   initial       Would return true if the initial value has not changed

User · Answer

Since the user can go into the OS menu and select paste using their mouse  there is no safe event that will trigger this for you  The only way I found that always works is to have a setInterval that checks if the input value has changed   var inp       input        val   saved   inp val        tid   setInterval function             val   inp val            if   saved    val                 console log   input has changed                saved   val        50     You can also set this up using a jQuery special event

User · Answer

Yes  compare it to the value it was before it changed   var previousValue       elm   val        elm   keyup function e        var currentValue     this  val        if currentValue    previousValue             previousValue   currentValue           alert  Value changed                 Another option is to only trigger your changed function on certain keys  Use e KeyCode to figure out what key was pressed

User · Answer

There is a simple solution  which is the HTML5 input event  It s supported in current versions of all major browsers for  lt input type  text  gt  elements and there s a simple workaround for IE  lt  9  See the following answers for more details    jQuery keyboard events Catch only keypresses that change input    Example  except IE  lt  9  see links above for workaround        your id   on  input   function         alert  Change to     this value

User · Answer

function checkChange  this       var value    this val              var sv  this data  stored                        if value  sv               this trigger  simpleChange             document  ready function          this  data  stored    this  val                   input   bind  keyup  function e             checkChange   this                           input   bind  simpleChange  function e           alert  the value is chaneged                          here is the fiddle http   jsfiddle net Q9PqT 1

User · Answer

You can set events on a combination of key and mouse events  and onblur as well  to be sure  In that event  store the value of the input  In the next call  compare the current value with the lastly stored value  Only do your magic if it has actually changed   To do this in a more or less clean way   You can associate data with a DOM element  lookup api jquery com jQuery data   So you can write a generic set of event handlers that are assigned to all elements in the form  Each event can pass the element it was triggered by to one generic function  That one function can add the old value to the data of the element  That way  you should be able to implement this as a generic piece of code that works on your whole form and every form you ll write from now on     And it will probably take no more than about 20 lines of code  I guess   An example is in this fiddle  http   jsfiddle net zeEwX

[javascript] Can jQuery check whether input content has changed?

Examples related to javascript

Examples related to jquery

Examples related to input

Examples related to onchange