I have a JavaScript library that updates a hidden <textarea> HTML element with some data based on some things.

In my (JavaScript) application I'd like to know when these updates occur without having to go through the existing library code.

I was hoping there was an event for this, but apparently not.

How would I listen for changes of the textarea?

Changes can be as simple as document.getElementById("myTextarea").value = "hello";

EDIT I will be using FireFox only, since this code will only be part of a test suite I'm building.

I have a JavaScript library that updates a hidden <textarea> HTML element with some data based on some things.

In my (JavaScript) application I'd like to know when these updates occur without having to go through the existing library code.

I was hoping there was an event for this, but apparently not.

How would I listen for changes of the textarea?

Changes can be as simple as document.getElementById("myTextarea").value = "hello";

EDIT I will be using FireFox only, since this code will only be part of a test suite I'm building.

• javascript
• html
• dom

• I don't get it, what kind of event are you talking about? -- After reading it three more times, I get it. You want an event for whatever update on that hidden textarea. – Harmen Commented Jan 15, 2010 at 13:21
• the event that would fire when the textarea's content is different than the previous one. I thought onchange would do this, but it doesn't if you don't interact with the textarea itself. – Luca Matteis Commented Jan 15, 2010 at 13:23
• onchange really doesn't seem to cut it, deleted my answer. That sucks - if onchange doesn't do it, I can't think of any other event that would catch this, except for frequently polling for the fields's value which of course is horrible. – Pekka Commented Jan 15, 2010 at 13:24
• @Pekka, i know :(. How would i go about polling? JavaScript being single-threaded and all, not sure that's possible. – Luca Matteis Commented Jan 15, 2010 at 13:27
• You could set a setTimeout every x milliseconds. It can be done but is, of course, horribly expensive. Check out first whether my 2nd answer might help you. – Pekka Commented Jan 15, 2010 at 13:37

6 Answers 6

If you control the Javascript library you mention, I would say the easiest way would be to manually trigger the change event every time you change a field's value.

I think this is how it's done in JQuery: Events/change Otherwise, a simple document.getElementById('myTextarea').onchange() might work as well.

If you have many calls, you could wrap the changing of the value, and the triggering of the event into a changeFormElement(id, value) function.

This requires, of course, that you can modify every instance of when a textarea is changed. If that is given, this is probably the most elegant way.

I know it's probably not what you want to hear but only IE seems to have an event that can handle this. It's the onpropertychange event.

textArea.onpropertychange = function ()
{
    if (event.propertyName == "innerText")
        alert('innerText has changed.');
}

If you're allowed to modify the library's code, I would do as Pekka mentioned and adjust the code so that it fires the change event. The only real cross-browser thing you could do is use a timer. If you use a low enough frequency timer, it probably wouldn't even be noticeable to the end user that you weren't using an event.

There is of course an unelegant and dishonorificabilitudinitatible way to achieve this, by setting a timer:

var oldVal, el;
function setTimer(){
    setTimeout(function(){
        if(el.value != oldVal){
            console.log('something happened');
            oldVal = el.value;
        }
        setTimer();
    }, 5000);
};

This will compare the value every five seconds to the value of five seconds ago.

In FireFox you can extend the value setter:

HTMLTextAreaElement.prototype.__defineSetter__("value", function(t) {
    alert('someone is setting the value of a textarea');
    return this.textContent = t;
});

DOM events do not occur when value to the node is setted programmatically through node.value; Search for API documentation of your JavaScript library and see if they have some notification mechanism.

EDITED: Firefox? Oh great, then there is such interesting function as watch. It watches for property changes. For you, this means, that when library change the 'value' property of the textarea you receive notification. What more nice, is that you even can control the value setted to the property. See in action.

var textnode = document.createElement('textarea');
textnode.watch('value', function(attr, oldv, newv){
    alert(newv);
    return newv; // you have to return correct value back.
});

//and now trigger the change to see that this works.
textnode.value = 'Bla';

Maybe this helps? :)

Please note, in textarea value doesn't work, it works as "innerHTML", so use like

document.getElementById("myTextarea").innerHTML = "hello";