Detect any change in textarea

Hi,
I have the following html :
 <div id="middle">
     <textarea id="editor"></textarea>
     <div id="markdown" style="display:none; height:100%">
      <ul class="tab">
        <li> <a href="#" class="tablinks" data-tab="write">Write</a></li>
        <li> <a herf="#" class="tablinks" data-tab="preview">Preview</a></li>
      </ul>
        <div id="write" class="tabcontent">
          <textarea></textarea>
        </div>
        <div id="preview" class="tabcontent">
        </div>
    </div>

Open in new window


The thing i am interested in is :
<div id="write" class="tabcontent">
          <textarea></textarea>
        </div>

Here i want to catch the event when user changes something the first time in textarea.
Change can happen due to copy paste, cut, typing in something...etc..

The way i am using it is ... this textarea will be autofilled with some text once the user load a particular page. It will contain the info entered last time by the user.
And he can update the info.. But my update button will become active only when user changes the textarea.
So basically i need to listen to this event only once and avoid listener being called again and again as user types in.

Thanks
Rohit BajajAsked:
Who is Participating?

Improve company productivity with a Business Account.Sign Up

x
 
PawełConnect With a Mentor I Design & Develop SoftwareCommented:
You'll have to listen to the paste event and the key up events

textarea.addEventListener ("paste", checkForChange, false);

textarea.addEventListener("keyup", checkForChange, false);

function checkForChange(){
  //check changes

//if changes made
 textarea.removeEventListener('paste', checkForChange, false);

 textarea.removeEventListener('keyup',  checkForChange, false);
}

something like that
0
 
leakim971Connect With a Mentor PluritechnicianCommented:
Where "updateButton" is the value of the ID attribute of your update button.

<script type="text/javascript">
jQuery(function($) {
    var previousEditorValue = $("#editor").val();
    setInterval(function() {
        var currentEditorValue = $("#editor").val();
        if( previousEditorValue == currentEditorValue )
        {
             $("#updateButton").prop("disabled", true);
        }
        else
        {
             previousEditorValue = currentEditorValue;
             $("#updateButton").prop("disabled", false);
        }
    }, 100);
});
</script>

Open in new window

0
 
hieloConnect With a Mentor Commented:
Try using an onchange event listener on the <textarea> then unregister the event listener at the end so it triggers only once:
<!-- give your textarea a unique id -->
<div id="write" class="tabcontent">
          <textarea id="write-textarea"></textarea>
        </div>

<script type="text/javascript">
jQuery(function($){
  $('#write-textarea').on('change',function(){
    // do whatever you need to do upon first change
    // ... -ex:
    alert(this.value);

   $(this).off('change');
  });
});

</script>

Open in new window

0
What Kind of Coding Program is Right for You?

There are many ways to learn to code these days. From coding bootcamps like Flatiron School to online courses to totally free beginner resources. The best way to learn to code depends on many factors, but the most important one is you. See what course is best for you.

 
PawełI Design & Develop SoftwareCommented:
check this out
http://codepen.io/anon/pen/OXAkGb

the tricky part is the timeout, it's required so that you can compare the new pasted value with the default value.
0
 
lenamtlConnect With a Mentor Commented:
Hi,

Since 3  weeks I have tested a lot of detection scripts.
The one I prefer is verifying the previous value with the new value so no timer needed.
And you have the button state that change.

this will add dirrty-initial-value="my content" data-is-dirrty="false" to your textarea code ans
add change data-is-dirrty="true" when change is detected
the submit button will be enable if data-is-dirrty="true"
which is optional

This is also alerting if the user try to quit the page without saving, click on button ect
which is optional

https://github.com/rubentd/dirrty

Demo http://rubentd.com/dirrty/

Let me know if you need help using it
0
 
hieloCommented:
>> this will add dirrty-initial-value="my content" data-is-dirrty="false" to your textarea code ans
add change data-is-dirrty="true" when change is detected

That seems unnecessary.  Textareas and text boxes already have a built-in property named defaultValue which contains what dirrty-initial-value has, so there is no need to add an extra attribute to the textarea.  If you simply add an onchange event listener to the textarea, it will trigger only if something actually changed.  Furthermore, within the event listener, you can always examine this.defaultValue and this.value to determine what changed.  Thus, the data-is-dirrty attribute also seems unnecessary.  Overall, it does seem like a dirrty solution, don't you think?  :)
1
 
lenamtlCommented:
Hi hielo,

Well this is just a different solution that will work with other form input too.
This also notify the user if he quit before saving and this also include the button state.

There are many way to do things...
Have a great day
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.