How can I bind to the change event of a textarea in jQuery

Question

I want to capture if any changes happened to  lt textarea gt   Like typing any characters  deleting backspace  or mouse click and paste or cut   Is there a jQuery event that can trigger for all those events    I tried change event  but it triggers the callback only after tabbing out from the component   Use  I want to enable a button if a  lt textarea gt  contains any text

User · Answer

Try to do it with focusout     textarea   focusout function        alert  textarea focusout

User · Answer

Try this         textarea   trigger  change        textarea   bind  cut paste   function e

User · Answer

delegate is the only one that is working to me with jQuery JavaScript Library v2 1 1     document  delegate   textareaID   change   function               console log  change

User · Answer

After some experimentation I came up with this implementation       detect-change        on  change cut paste   function e            console log  Change detected             contentModified   true              keypress function e            if  e which     0  amp  amp  e altKey    false  amp  amp  e ctrlKey    false  amp  amp  e metaKey    false                console log  Change detected                 contentModified   true                      Handles changes to any kind of input and select as well as textareas ignoring arrow keys and things like ctrl  cmd  function keys  etc   Note  I ve only tried this in FF since it s for a FF add-on

User · Answer

bind is deprecated  Use on       textarea   on  change keyup paste   function            your code here       Note  The code above will fire multiple times  once for each matching trigger-type  To handle that  do something like this   var oldVal           textarea   on  change keyup paste   function         var currentVal     this  val        if currentVal    oldVal            return    check to prevent multiple simultaneous triggers            oldVal   currentVal        action to be performed on textarea changed     alert  changed           jsFiddle Demo

User · Answer

Here s another  modern  but slightly different version than the ones mentioned before  Tested with IE9       textareaID   on  input change keyup   function        if  this value length           textarea has content     else          textarea is empty           For outdated browsers you might also add selectionchange and propertychange  as mentioned in other answers   But selectionchange didn t work for me in IE9  That s why I added keyup

User · Answer

try this          txtAreaID   bind  keyup   function event  ui                                                Write your code here

User · Answer

2018  without JQUERY  The question is with JQuery  it s just FYI   JS  let textareaID   document getElementById  textareaID    let yourBtnID   document getElementById  yourBtnID    textareaID addEventListener  input   function         yourBtnID style display    none       if  textareaID value length            yourBtnID style display    inline-block               HTML   lt textarea id  textareaID  gt  lt  textarea gt   lt button id  yourBtnID  style  display  none   gt click me lt  div gt

User · Answer

Use an input event   var button       buttonId        textareaID   on  input  function e     if e target value                 Textarea has no value     button hide        else          Textarea has a value     button show

User · Answer

This question needed a more up-to-date answer  with sources  This is what actually works  though you don t have to take my word for it       Storing this jQuery object outside of the event callback     prevents jQuery from having to search the DOM for it again    every time an event is fired  var  myButton       buttonID       input              for all modern browsers  1     selectionchange    for IE9  2     propertychange     for  lt IE9  3      textareaID   on  input selectionchange propertychange   function           This is the correct way to enable disabled a button in jQuery  4     myButton prop  disabled   this value length     0       1  https   developer mozilla org en-US docs Web Events input Browser compatibility  2  oninput in IE9 doesn  39 t fire when we hit BACKSPACE   DEL   do CUT  3  https   msdn microsoft com en-us library ms536956 v vs 85  aspx  4  http   api jquery com prop  prop-propertyName-function  BUT  for a more global solution that you can use throughout your project  I recommend using the textchange jQuery plugin to gain a new  cross-browser compatible textchange event  It was developed by the same person who implemented the equivalent onChange event for Facebook s ReactJS  which they use for nearly their entire website  And I think it s safe to say  if it s a robust enough solution for Facebook  it s probably robust enough for you   -   UPDATE  If you happen to need features like drag and drop support in Internet Explorer  you may instead want to check out pandell s more recently updated fork of jquery-splendid-textchange

User · Answer

Try this actually       textareaID   bind  input propertychange   function                yourBtnID   hide           if this value length               yourBtnID   show                  DEMO  That works for any changes you make  typing  cutting  pasting

[javascript] How can I bind to the change event of a textarea in jQuery?

Examples related to javascript

Examples related to jquery

Examples related to jquery-ui