Detecting changes in textarea with dynamically-binded data?

Question

I want to detect when the content of a <textarea> element has changed. For changes done by the user, I can use solutions in these questions:

1. How can I bind to the change event of a textarea in jQuery?
2. Textarea onchange detection

which detects keypresses, pastes events etc. But what if the data is data-bound dynamically, for example using frameworks such as AngularJS, MeteorJS etc. I must then add a function to be ran in the frameworks alongside the data-binding functions.

Is there a Javascript or jQuery method / event listener that I can use to detect content change, without adding it in the framework?

Answer 1

You can use setInterval This is an example with jQuery :

Html

 <textarea id="textarea"></textarea>
<a href="#" id="link">change text dynamicly</a>
<span id="status"></span>

Javascript

$(function(){
    $('#textarea').data('old',$('#textarea').val())
    $('#link').on('click',function(){
          $('#textarea').val('text changed dynamicly');
        return false;
    })
    setInterval(function() { 
        if($('#textarea').val() != $('#textarea').data('old')){
            $('#status').html('text of textarea is changed to : ' + $('#textarea').val())
        }
         $('#textarea').data('old',$('#textarea').val())
    }, 100);
})

this is a demo in jsfiddle