?
Solved

Detect any change in textarea

Posted on 2016-08-09
7
Medium Priority
?
135 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 10

Accepted Solution

by:
Paweł earned 1004 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 83

Assisted Solution

by:leakim971
leakim971 earned 332 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 332 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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
LVL 10

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 27

Assisted Solution

by:lenamtl
lenamtl earned 332 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 27

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

[Webinar On Demand] Database Backup and Recovery

Does your company store data on premises, off site, in the cloud, or a combination of these? If you answered “yes”, you need a data backup recovery plan that fits each and every platform. Watch now as as Percona teaches us how to build agile data backup recovery plan.

Question has a verified solution.

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

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses

580 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