How to detect a textbox s content has changed

Question

I want to detect whenever a textbox s content has changed  I can use the keyup method  but that will also detect keystrokes which do not generate letters  like the arrow keys  I thought of two methods of doing this using the keyup event    Check explictly if the ascii code of the pressed key is a letter backspace delete Use closures to remember what was the text in the textbox before the key stroke and check whether this has changed    Both look kinda cumbersome

User · Answer

Use the onchange event in HTML standard JavaScript   In jQuery that is the change   event  For example      element   change function        do something       EDIT  After reading some comments  what about     function         var content       myContent   val             myContent   keyup function              if      myContent   val      content                content       myContent   val                alert  Content has been changed

User · Answer

Start observing  input  event instead of  change    jQuery   some text box   on  input   function            do your stuff          which is nice and clean  but may be extended further to   jQuery   some text box   on  input propertychange paste   function            do your stuff

User · Answer

How about this    lt  jQuery 1 7      input   bind  propertychange change keyup paste input   function           do stuff          jQuery 1 7      input   on  propertychange change keyup paste input   function           do stuff        This works in IE8 IE9  FF  Chrome

User · Answer

document getElementById  txtrate    rowCount  onchange   function                            your logic     This one works fine but triggers the event on click too which is not good  my system went into loop  while     txtrate  rowCount  bind  input   function               your logic       works perfectly in my scenario  it only works when value is changed  instead of   sign one can use document getElementById too

User · Answer

do you consider using change event         myTextBox   change function     alert  content changed

User · Answer

I d like to ask why you are trying to detect when the content of the textbox changed in real time   An alternative would be to set a timer  via setIntval   and compare last saved value to the current one and then reset a timer  This would guarantee catching ANY change  whether caused by keys  mouse  some other input device you didn t consider  or even JavaScript changing the value  another possiblity nobody mentioned  from a different part of the app

User · Answer

Use the textchange event via customized jQuery shim for cross-browser input compatibility  http   benalpert com 2013 06 18 a-near-perfect-oninput-shim-for-ie-8-and-9 html  most recently forked github  https   github com pandell jquery-splendid-textchange blob master jquery splendid textchange js   This handles all input tags including  lt textarea gt content lt  textarea gt   which does not always work with change keyup etc      Only jQuery on  input propertychange   handles  lt textarea gt  tags consistently  and the above is a shim for all browsers that don t understand input event    lt  DOCTYPE html gt   lt html gt   lt head gt   lt script class  jsbin  src  http   ajax googleapis com ajax libs jquery 1 jquery min js  gt  lt  script gt   lt script src  https   raw githubusercontent com pandell jquery-splendid-textchange master jquery splendid textchange js  gt  lt  script gt   lt meta charset utf-8   gt   lt title gt splendid textchange test lt  title gt    lt script gt     this is all you have to do  using splendid textchange js     textarea   on  textchange  function       yourFunctionHere   this  val                lt  script gt   lt  head gt   lt body gt     lt textarea style  height 3em width 90   gt  lt  textarea gt   lt  body gt   lt  html gt    JS Bin test  This also handles paste  delete  and doesn t duplicate effort on keyup   If not using a shim  use jQuery on  input propertychange   events      works with most recent browsers  use this if not using src     splendid textchange js       textarea   on  input propertychange  function       yourFunctionHere   this  val

User · Answer

There s a complete working example here    lt html gt   lt title gt jQuery Summing lt  title gt   lt head gt   lt script type  text javascript  src  http   ajax googleapis com ajax libs jquery 1 8 3 jquery min js  gt   lt  script gt    document  ready function         calc   on  input   function     var t1   document getElementById  txt1    var t2   document getElementById  txt2    var tot 0  if  parseInt t1 value   tot    parseInt t1 value   if  parseInt t2 value   tot    parseInt t2 value   document getElementById  txt3   value   tot           lt  script gt   lt  head gt   lt body gt   lt input type  text  class  calc  id  txt1  gt   lt input type  text  class  calc  id  txt2  gt   lt input type  text  id  txt3  readonly gt   lt  body gt   lt  html gt

User · Answer

The  change  event doesn t work correctly  but the  input  is perfect       your textbox   bind  input   function            This will be fired every time  when textbox s value changes

User · Answer

Something like this should work  mainly because focus and focusout would end up with two separate values  I m using data here because it stores values in the element but doesn t touch the DOM  It is also an easy way to store the value connected to its element  You could just as easily use a higher-scoped variable   var changed   false      textbox   on  focus   function e          this  data  current-val     this  text            textbox   on  focusout   function e        if    this  data  current-val        this  text            changed   true            console log  Changed Result   changed

User · Answer

Use closures to remember what was the text in the checkbox before the key stroke and check whether this has changed    Yep  You don t have to use closures necessarily  but you will need to remember the old value and compare it to the new   However  This still won t catch every change  because there a ways of editing textbox content that do not involve any keypress  For example selecting a range of text then right-click-cut  Or dragging it  Or dropping text from another app into the textbox  Or changing a word via the browser s spell-check  Or     So if you must detect every change  you have to poll for it  You could window setInterval to check the field against its previous value every  say  second  You could also wire onkeyup to the same function so that changes that are caused by keypresses are reflected quicker   Cumbersome  Yes  But it s that or just do it the normal HTML onchange way and don t try to instant-update

User · Answer

I assume that you are looking to do something interactive when the textbox changes  i e  retrieve some data via ajax    I was looking for this same functionality   I know using a global isn t the most robust or elegant solution  but that is what I went with   Here is an example   var searchValue       Search   val      function          setTimeout checkSearchChanged  0 1        function checkSearchChanged         var currentValue       Search   val        if   currentValue   amp  amp  currentValue    searchValue  amp  amp  currentValue                  searchValue       Search   val                submit   click              else           setTimeout checkSearchChanged  0 1             One key thing to note here is that I am using setTimeout and not setInterval since I don t want to send multiple requests at the same time   This ensures that the timer  stops  when the form is submitted and  starts  when the request is complete   I do this by calling checkSearchChanged when my ajax call completes   Obviously you could expand this to check for minimum length  etc   In my case  I am using ASP Net MVC so you can see how to tie this in with MVC Ajax as well in the following post   http   geekswithblogs net DougLampe archive 2010 12 21 simple-interactive-search-with-jquery-and-asp net-mvc aspx

User · Answer

I would recommend taking a look at jQuery UI autocomplete widget  They handled most of the cases there since their code base is more mature than most ones out there    Below is a link to a demo page so you can verify it works  http   jqueryui com demos autocomplete  default  You will get the most benefit from reading the source and seeing how they solved it  You can find it here  https   github com jquery jquery-ui blob master ui jquery ui autocomplete js   Basically they do it all  they bind to input  keydown  keyup  keypress  focus and blur  Then they have special handling for all sorts of keys like page up  page down  up arrow key and down arrow key  A timer is used before getting the contents of the textbox  When a user types a key that does not correspond to a command  up key  down key and so on  there is a timer that explorers the content after about 300 milliseconds  It looks like this in the code      switch statement in the  switch  event keyCode                                   case keyCode ENTER              case keyCode NUMPAD ENTER                     when menu is open and has focus                 if   this menu active                             6055 - Opera still allows the keypress to occur                        which causes forms to submit                     suppressKeyPress   true                      event preventDefault                        this menu select  event                                      break              default                  suppressKeyPressRepeat   true                     search timeout should be triggered before the input value is changed                 this  searchTimeout  event                    break                               searchTimeout  function  event         clearTimeout  this searching        this searching   this  delay function          essentially a warpper for a setTimeout call              only search if the value has changed         if   this term     this  value             value is a wrapper to get the value               this selectedItem   null              this search  null  event                     this options delay         The reason to use a timer is so that the UI gets a chance to be updated  When Javascript is  running the UI cannot be updated  therefore the call to the delay function  This works well for other situations such as keeping focus on the textbox  used by that code    So you can either use the widget or copy the code into your own widget if you are not using jQuery UI  or in my case developing a custom widget

User · Answer

document  on  input    mytxtBox  function        console log     mytxtBox   val           You can use  input  event to detect the content change in the textbox  Don t use  live  to bind the event as it is deprecated in Jquery-1 7  So make use of  on

User · Answer

This Code detects whenever a textbox s content has changed by the user and modified by Javascript code   var  myText   jQuery   textbox      myText data  value    myText val      setInterval function         var data    myText data  value        val    myText val         if  data     val            console log  changed             myText data  value   val            100

[javascript] How to detect a textbox's content has changed

Examples related to javascript

Examples related to jquery

Examples related to textbox

Examples related to keypress