I have noticed that in different versions of Internet Explorer the event onchange
is not captured when the value of an input is altered by a function js, behavior that does not happen with other browsers such as Mozilla or Chrome.
Investigating a bit I found that the correct functioning of onchange
in IE is not guaranteed when the value is altered by js:
Example of how to reproduce it:
function onchangeRequest(){
console.log('onchange fired');
}
function changeValue (input){
input.value += "add"
}
<h4> Al perder el foco no invoca onchangeRequest() </h4>
<input id="valueInput" placeholder= "Insert value here" onkeyup="changeValue(this);" onchange="onchangeRequest();" />
<h4> Al perder el foco invoca onchangeRequest() </h4>
<input id="valueInput" placeholder= "Insert value here" onchange="onchangeRequest();" />
I have not found a convincing explanation of the reasons why IE does not solve these situations correctly although there are alternatives to obtain the same behavior, such as implementing onchange
by onfocs
and onblur
keeping the previous value of the input and checking if there were changes, I would like to know the reasons why this behavior occurs.
Is this a known mistake that we have to deal with and implement other alternatives like the one mentioned above? Is there any official reference where it is made explicit that IE does not guarantee the correct behavior of onchange?