6

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.

Luca Matteis
  • 29,161
  • 19
  • 114
  • 169
  • 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 Jan 15 '10 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 Jan 15 '10 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 Jan 15 '10 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 Jan 15 '10 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 Jan 15 '10 at 13:37
  • ` – Roatin Marth Jan 15 '10 at 14:23

6 Answers6

4

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.

Pekka
  • 442,112
  • 142
  • 972
  • 1,088
  • 1
    `change` in jQuery is only fired when someone loses focus on an input field – Harmen Jan 15 '10 at 13:40
  • +1 Pekka. I agree that editing the library would be the best course of action if possible. *@Harmen:* He's talking about editing the library the asker is using to make it fire the `change` event. – Andy E Jan 15 '10 at 13:43
3

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.

Andy E
  • 338,112
  • 86
  • 474
  • 445
  • 2
    I'm always dubious about mentioning IE-only solutions. No matter how much you might be posting it for the sake of the asker, and how correct it might be, some IE-hating maniac downvotes you without mentioning why. – Andy E Jan 15 '10 at 14:29
2

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.

Harmen
  • 22,092
  • 4
  • 54
  • 76
2

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;
});
Darin Dimitrov
  • 1,023,142
  • 271
  • 3,287
  • 2,928
1

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? :)

nemisj
  • 11,562
  • 2
  • 25
  • 23
  • Yes i know, but i thought at least textarea would have such functionality since it's more of a 'data container' rather than just a textual element. – Luca Matteis Jan 15 '10 at 13:56
-3

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

document.getElementById("myTextarea").innerHTML = "hello";
Jatin
  • 3,065
  • 6
  • 28
  • 42
Saif
  • 1