Solved

Detect any change in textarea

Posted on 2016-08-09
7
94 Views
Last Modified: 2016-08-13
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
0
Comment
Question by:Rohit Bajaj
  • 2
  • 2
  • 2
  • +1
7 Comments
 
LVL 9

Accepted Solution

by:
Paweł earned 251 total points
ID: 41749893
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
 
LVL 82

Assisted Solution

by:leakim971
leakim971 earned 83 total points
ID: 41750277
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
 
LVL 82

Assisted Solution

by:hielo
hielo earned 83 total points
ID: 41752113
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
Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

 
LVL 9

Expert Comment

by:Paweł
ID: 41752184
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
 
LVL 25

Assisted Solution

by:lenamtl
lenamtl earned 83 total points
ID: 41752413
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
 
LVL 82

Expert Comment

by:hielo
ID: 41753420
>> 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
 
LVL 25

Expert Comment

by:lenamtl
ID: 41754364
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

Featured Post

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

773 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question