Manually changing value does not trigger onChange event if the value was changed before programmatically

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.

Mila

Can you provide an example, such as a jsFiddle, that demonstrates this? Also, what browser are you using and are you sure in supports this input type? – Minuet

this is js on iOS safari. The interesting thing is that the problem occurs ONLY when i change manually the value to the value it was having before the programattically change. In any other case the input number triggers perfectly their onchange method... – Mila

the only thing it makes me some good result is using the onInput event instead of onChange .... but i dont know if its going to bring me more problems. – Mila

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.

Kutenai

i think the input event still will not trigger on a programmatic input change, i think it's meant as a solution to the need for tracking ongoing text field input detection without resorting to keyup keydown events. w3schools.com/html5/html5_ref_eventattributes.asp – Packing

Yes, you're right. W3Schools is a very ordinary site though, they claim "onreset is not supported in HTML5". Quite the opposite, it is one of thse that user agensts must support: HTML5 onreset – Kutenai

Wow, I was actually looking for something like this list. Thanks!! I dunno but it seems quite hard to navigate and search for something in W3 spec docs... – Packing

Thanks. I was thinking this might be a question that had concerned many people. But it turns out there are few vote-ups. – Palimpsest

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.

Vaduz

Answer 3

if somebody still stacked on this question

inputEl.dispatchEvent('change')

Conflagration