Solved

Detect any change in textarea

Posted on 2016-08-09
7
108 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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

Free Tool: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
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 the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

749 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