如果在编程之前更改了值，则手动更改值不会触发onChange事件

Question

We have an input type = "number" and we have set an onChange method.

The default value of the input is 0.

Then we change the value programatically to say, 10.

Now we change the value manually to 0 again.

The onChange Method is not called on the manually made change. I think that's because the event wasn't called when we changed their value programmatically to 10. So in a way the control thinks that the value still is 0.

This happens only when I set manually the value to the value it was having BEFORE the programmatic change. If I use any other value to make the manual change, the onChange event is triggered correctly.

Answer 1

Programatically changing a form control's value doesn't trigger its change handler, probably because the change event was specified as occuring after the user had changed the value and the control lost focus. Programmatic changes didn't follow that sequence (programmatically setting focus and blur to imitate user actions didn't help, though a programmatic change event could be dispatched on the element).

HTML5 introduced a new input event that fires whenever an input receives user input:

<input id="i0" oninput="alert(this.value);" value="">

You could use that instead of onchange, but it fires on each keypress and also if text is pasted or dragged to the input.

Note however that no browser fully supports HTML5 (and probably never will, since it's a moving target), so you will need to provide feature testing and a fall back mechanism should the input event not be supported.

Answer 2

The input needs focus for onchange to be triggered. That is actually a good thing if programatically setting the input value does not trigger the onchange event. It would have created a circular setting from between the input and the code.