Solved

Detect any change in textarea

Posted on 2016-08-09
7
78 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 8

Accepted Solution

by:
Paweł earned 251 total points
Comment Utility
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
Comment Utility
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
Comment Utility
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 Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

 
LVL 8

Expert Comment

by:Paweł
Comment Utility
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 24

Assisted Solution

by:lenamtl
lenamtl earned 83 total points
Comment Utility
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
Comment Utility
>> 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 24

Expert Comment

by:lenamtl
Comment Utility
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

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Suggested Solutions

How to build a simple, quick and effective accordion menu using just 15 lines of jQuery and 2 css classes
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

771 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

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now