Javascript Events: Getting notified of changes in an <input> control value

Question

I have the following problem:

I have an HTML textbox (<input type="text">) whose contents are modified by a script I cannot touch (it is my page, but i'm using external components).

I want to be notified in my script every time the value of that textbox changes, so I can react to it.

I've tried this:

txtStartDate.observe('change', function() { alert('change' +  txtStartDate.value) });

which (predictably) doesn't work. It only gets executed if I myself change the textbox value with the keyboard and then move the focus elsewhere, but it doesn't get executed if the script changes the value.

Is there another event I can listen to, that i'm not aware of?

I'm using the Prototype library, and in case it's relevant, the external component modifying the textbox value is Basic Date Picker (www.basicdatepicker.com)

Answer 1

As you've implied, change (and other events) only fire when the user takes some action. A script modifying things won't fire any events. Your only solution is to find some hook into the control that you can hook up to your listener.

Here is how I would do it:

basicDatePicker.selectDate = basicDatePicker.selectDate.wrap(function(orig,year,month,day,hide) {
  myListener(year,month,day);
  return orig(year,month,day,hide);
});

That's based on a cursory look with Firebug (I'm not familiar with the component). If there are other ways of selecting a date, then you'll need to wrap those methods as well.

Answer 2

Depending on how the external javascript was written, you could always re-write the relevant parts of the external script in your script and have it overwrite the external definition so that the change event is triggered.

I've had to do that before with scripts that were out of my control.

You just need to find the external function, copy it in its entirety as a new function with the same name, and re-write the script to do what you want it to.

Of course if the script was written correctly using closures, you won't be able to change it too easily...

Answer 3

IE has an onpropertychange event which could be used for this purpose.

For real web browsers (;)), there's a DOMAttrModified mutation event, but in a couple of minutes worth of experimentation in Firefox, I haven't been able to get it to fire on a text input when the value is changed programatically (or by regular keyboard input), yet it will fire if I change the input's name programatically. Curiouser and curiouser...

If you can't get that working reliably, you could always just poll the input's value regularly:

var value = someInput.value;

setInterval(function()
{
    if (someInput.value != value)
    {
        alert("Changed from " + value + " to " + someInput.value);
        value = someInput.value;
    }
}, 250);

Answer 4

Aside from getting around the problem like how noah explained, you could also just create a timer that checks the value every few hundred milliseconds.

Answer 5

I had to modify the YUI datable paginator control once in the manner advised by Dan. It's brute force, but it worked in solving my problem. That is, locate the method writing to the field, copy its code and add a statement firing the change event and in your code just handle that change event. You just have to override the original function with that new version of it. Polling, while working fine seems to me a much more resource consuming solution.

Answer 6

addEventListener("DOMControlValueChanged" will fire when a control's value changes, even if it's by a script.

addEventListener("input" is a direct-user-initiated filtered version of DOMControlValueChanged.

Unfortunately, DOMControlValueChanged is only supported by Opera currently and input event support is broken in webkit. The input event also has various bugs in Firefox and Opera.

This stuff will probably be cleared up in HTML5 pretty soon, fwiw.

Answer 7

Noah, that's a great answer, it works perfectly. Can I ask you how you found out about that method easily with Firebug?

Because I thought of wrapping a function inside BDP, but I didn't want to spend hours trying to figure out that code.

Answer 8

How to make this work whit jQuery and a text input where the value is set like

myTextControl.value = someValue