Detect all changes to a input type text immediately using JQuery

Question

There are many ways the value of a  lt input type  text  gt  can change  including    keypresses copy paste modified with JavaScript auto-completed by browser or a toolbar   I want my JavaScript function to be called  with the current input value  any time it changes   And I want it to be called right away  not just when the input loses focus   I m looking for the cleanest and most robust way to do this across all browsers  using jQuery preferably

User · Answer

Well  best way is to cover those three bases you listed by yourself  A simple  onblur   onkeyup  etc won t work for what you want  so just combine them   KeyUp should cover the first two  and if Javascript is modifying the input box  well I sure hope it s your own javascript  so just add a callback in the function that modifies it

User · Answer

NO JQUERY   Its kindof obsolete these days anyways  Heres an Non-ASCII detector using event listeners Using the event  quot input quot  you can look for any kind of change  Deleting  Backspacing  Pasting  Typing  anything that will change the inputs value  The input event is directly related to the setter of the text input  ANY time the text is changed in ANY fashion  input is dispatched   x000D   x000D  document querySelector   testInput   addEventListener  input   test   document querySelector   testInputLocked   addEventListener  input   testLocked    function test e     var a   document getElementById  output     if  e target value              -      test e target value       a innerText    ASCII  true      else if       -      test e target value       a innerText    ASCII  false         function testLocked e     e target value   e target value replace     -    g         x000D  Try pressing Alt NumPad2 NumPad3 in the input  it will instantly detect a change  whether you Paste  Type  or any other means  rather than waiting for you to unselect the textbox for changes to detect   lt br gt  lt br gt   lt input id  testInput  gt   lt a id  output  gt ASCII  true lt  a gt   lt br gt  lt br gt  Want to lock it to ASCII and replace all Non-ASCII   lt br gt   lt input id  testInputLocked  placeholder  ASCII Locked  gt  x000D   x000D   x000D

User · Answer

Here s a working example that I m using to implement an autocomplete variation the populates a jqueryui selector  list   but I don t want it to function exactly like the jqueryui autocomplete which does a drop-down menu       tagFilter   on  change keyup paste   function          var filterText       tagFilter   val            tags   empty          getJSON  http   localhost cgi-bin tags php term     filterText          function data                var i              for  i   0  i  lt  data length  i                      var tag   data i  value                      tags   append   lt li class   tag   gt     tag     lt  li gt

User · Answer

I have created a sample  May it will work for you     var typingTimer  var doneTypingInterval   10  var finaldoneTypingInterval   500   var oldData      p content   html        tyingBox   keydown function          clearTimeout typingTimer       if      tyingBox   val            typingTimer   setTimeout function                     p content   html  Typing                  doneTypingInterval                  tyingBox   keyup function          clearTimeout typingTimer       typingTimer   setTimeout function                 p content   html oldData          finaldoneTypingInterval          lt script src  https   ajax googleapis com ajax libs jquery 1 9 1 jquery min js  gt  lt  script gt     lt textarea id  tyingBox  tabindex  1  placeholder  Enter Message  gt  lt  textarea gt   lt p class  content  gt Text will be replace here and after Stop typing it will get back lt  p gt    http   jsfiddle net utbh575s

User · Answer

This jQuery code catches immediate changes to any element  and should work across all browsers        myElements   each function        var elem     this          Save current value of element    elem data  oldVal   elem val            Look for changes in the value    elem bind  propertychange change click keyup input paste   function event            If value has changed          if  elem data  oldVal      elem val                Updated stored value        elem data  oldVal   elem val                Do action

User · Answer

you can see this example and choose which are the events that interest you    lt  DOCTYPE html PUBLIC  -  W3C  DTD XHTML 1 0 Transitional  EN   http   www w3 org TR xhtml1 DTD xhtml1-transitional dtd  gt   lt html xmlns  http   www w3 org 1999 xhtml  gt   lt head gt   lt meta http-equiv  Content-Type  content  text html  charset iso-8859-1    gt   lt script type  text javascript  src  http   ajax googleapis com ajax libs jquery 1 3 2 jquery min js  gt  lt  script gt    lt title gt evetns lt  title gt   lt  head gt   lt body gt   lt form gt       lt input class  controlevents  id  i1  type  text    gt  lt br   gt       lt input class  controlevents  id  i2  type  text    gt  lt br   gt       lt input class  controlevents  id  i3  type  text    gt  lt br   gt       lt input class  controlevents  id  i4  type  text    gt  lt br   gt       lt input class  controlevents  id  i5  type  text    gt  lt br   gt   lt  form gt   lt div id  datatext  gt  lt  div gt   lt  body gt   lt  html gt   lt script gt    function     function testingevent ev       if  ev currentTarget tagName   INPUT               datatext   append   lt div gt id       ev currentTarget id      tag      ev currentTarget tagName      type     ev type    lt  div gt               var eventlist     resizeend   rowenter   dragleave   beforepaste   dragover   beforecopy   page   beforeactivate   beforeeditfocus   controlselect   blur                        beforedeactivate   keydown   dragstart   scroll   propertychange   dragenter   rowsinserted   mouseup   contextmenu   beforeupdate                        readystatechange   mouseenter   resize   copy   selectstart   move   dragend   rowexit   activate   focus   focusin   mouseover   cut                        mousemove   focusout   filterchange   drop   blclick   rowsdelete   keypress   losecapture   deactivate   datasetchanged   dataavailable                        afterupdate   mousewheel   keyup   movestart   mouseout   moveend   cellchange   layoutcomplete   help   errorupdate   mousedown   paste                        mouseleave   click   drag   resizestart   datasetcomplete   beforecut   change   error   abort   load   select         var inputs       controlevents           each eventlist  function i  el           inputs bind el  testingevent                 lt  script gt

User · Answer

you can simply identify all changers in the form  like this              when form change  show aleart                quot  FormId quot   change function                      aleart  Done some change on form

User · Answer

This is the fastest amp  clean way to do that    I m using Jquery--      selector   on  change   function          console log this id       this value         It is working pretty fine for me

User · Answer

Here is a slightly different solution if you didn t fancy any of the other answers     var field selectors      a     b    setInterval function          each field selectors  function          var input     this       var old   input attr  data-old-value        var current   input val        if  old     current           if  typeof old     undefined                  your code                   input attr  data-old-value   current                      500     Consider that you cannot rely on click and keyup to capture context menu paste

User · Answer

We actually don t need to setup loops for detecting javaScript changes  We already setting up many event listeners to the element we want to detect  just triggering any un harmful event will make the job      input name  test-element     on  propertychange change click keyup input paste blur   function    console log  yeh thats worked             input name  test-element     val  test   trigger  blur      and ofc this is only available if you have the full control on javascript changes on your project

User · Answer

I may be late to the party here but can you not just use the  change   event that jQuery provides   You should be able to do something like         CONTROLID  change function        do your stuff here           You could always bind it to a list of controls with something like      var flds      input  textarea   window document    flds live  change keyup   function         do your code here           The live binder ensures that all elements that exist on the page now and in the future are handled

User · Answer

Add this code somewhere  this will do the trick   var originalVal     fn val    fn val   function        var result  originalVal apply this arguments       if arguments length gt 0            this  change       OR with custom event   this  trigger  value-changed        return result       Found this solution at val   doesn  39 t trigger change   in jQuery

User · Answer

Binding to the oninput event seems to work fine in most sane browsers  IE9 supports it too  but the implementation is buggy  the event is not fired when deleting characters    With jQuery version 1 7  the on method is useful to bind to the event like this       inputElement   on  input   null  null  callbackFunction

User · Answer

Unfortunately there is no event or set of events that matches your criteria   Keypresses and copy paste can both be handled with the keyup event   Changes through JS are trickier   If you have control over the code that sets the textbox  your best bet is to modify it to either call your function directly or trigger a user event on the textbox      Compare the textbox s current and last value   Report a change to the console  function watchTextbox       var txtInput       txtInput      var lastValue   txtInput data  lastValue      var currentValue   txtInput val      if  lastValue    currentValue        console log  Value changed from     lastValue     to     currentValue       txtInput data  lastValue   currentValue             Record the initial value of the textbox      txtInput   data  lastValue       txtInput   val         Bind to the keypress and user-defined set event      txtInput   bind  keypress set   null  watchTextbox       Example of JS code triggering the user event     btnSetText   click function  ev          txtInput   val  abc def   trigger  set          If you don t have control over that code  you could use setInterval   to  watch  the textbox for changes      Check the textbox every 100 milliseconds   This seems to be pretty responsive  setInterval watchTextbox  100     This sort of active monitoring won t catch updates  immediately   but it seems to be fast enough that there is no perceptible lag   As DrLouie pointed out in comments  this solution probably doesn t scale well if you need to watch lots of inputs   You can always adjust the 2nd parameter to setInterval   to check more or less frequently

User · Answer

Can t you just use  lt span contenteditable  true  spellcheck  false  gt  element in place of  lt input type  text  gt       lt span gt   with contenteditable  true  spellcheck  false  as attributes  distincts by  lt input gt  mainly because    It s not styled like an  lt input gt   It doesn t have a value property  but the text is rendered as innerText and makes part of its inner body    It s multiline whereas  lt input gt  isn t although you set the attribute multiline  true     To accomplish the appearance you can  of course  style it in CSS  whereas writing the value as innerText you can get for it an event   Here s a fiddle   Unfortunately there s something that doesn t actually work in IE and Edge  which I m unable to find

User · Answer

You can bind the  input  event to  lt input type  quot text quot  gt   This will trigger every time the input changes such as copy  paste  keypress  and so on     quot  input-id quot   on  quot input quot   function           Your action

User · Answer

2017 answer  the input event does exactly this for anything more recent than IE8     el  on  input   callback

User · Answer

Unfortunately  I think setInterval wins the prize    lt input type text id input id   gt   lt script gt  setInterval function     ObserveInputValue     input id   val        100    lt  script gt    It s the cleanest solution  at only 1 line of code   It s also the most robust  since you don t have to worry about all the different events ways an input can get a value   The downsides of using  setInterval  don t seem to apply in this case    The 100ms latency   For many applications  100ms is fast enough  Added load on the browser   In general  adding lots of heavy-weight setIntervals on your page is bad   But in this particular case  the added page load is undetectable  It doesn t scale to many inputs   Most pages don t have more than a handful of inputs  which you can sniff all in the same setInterval

User · Answer

Although this question was posted 10 years ago  I believe that it still needs some improvements  So here is my solution     document  on  propertychange change click keyup input paste    selector   function  e           Do something here       The only problem with this solution is  it won t trigger if the value changes from javascript like    selector   val  some value    You can fire any event to your selector when you change the value from javascript     selector  val  some value       fire event   selector  trigger  change

User · Answer

A real-time fancy solution for jQuery    1 9      input-id   on  change keyup paste   function        dosomething         if you also want to detect  click  event  just       input-id   on  change keyup paste click   function        dosomething         if you re using jQuery  lt   1 4  just use live instead of on

[javascript] Detect all changes to a <input type="text"> (immediately) using JQuery

Examples related to javascript

Examples related to jquery

Examples related to html