“onchange” event delayed in IE? (ok with Firefox)

Question

It might be a beginner question but I can't understand why the onchange event is never called by IE while it works Ok with firefox.

<input type="text" id="mytext" size="48" value="" onchange="execute()"/>
<button type="button" onclick="execute()">Go</button>

The execute function is called when the button is clicked but not when the text in the input box is changed.

Any idea?

Answer 1

While annoying, it is not a bug that onchange is not fired until the element loses focus. (I get around the issue by having multiple bindings for different events; make sure not to clobber a handler and use an update aggregation if appropriate.)

Here is the "official" W3C documentation on the subject:

The onchange event occurs when a control loses the input focus and its value has been modified since gaining focus. This attribute applies to the following elements: INPUT, SELECT, and TEXTAREA.

Here is the MSDN reference:

This event is fired when the contents are committed and not while the value is changing. For example, on a text box, this event is not fired while the user is typing, but rather [it is fired] when the user commits the change by leaving the text box that has focus.

The behavior, while often annoying, is as specified.

Answer 2

IE only fires the onchange event when the element loses focus - if you were to click outside the element or tab to a different element it should fire then.

You can get around this by using a different event, for example onkeypress.

Answer 3

IE does it after your input loses focus, which isn't until you click the button, tab out, or click somewhere else on the screen. Try onclick or one of the other events.

Answer 4

As far as i remember, IE doesn't handle onchange event the same maner as FF. The event will be fired when the mouse is clicked.

I advise you to use a library to handle events such as jQuery, Dojo, etc..

Answer 5

ohhh, I spent some time on that issue as well months ago. I came up with this solution for FF/IE onchange

$("input[name*='delivery_method']").bind(($.browser.msie ? "click" : "change"), function() {
    //your code here
});

Answer 6

As answered elsewhere, IE doesn't fire the event till you click outside the input field.

Just a quick expaination of how I fixed it with jQuery. (This is a translation of my code, so it may contain bugs...)

<input id="somecheck" name="somecheck" value="1" onchange="dosomething();">

...was changed to...

<input id="somecheck" name="somecheck" value="1">

<script language="javascript">
$(document).ready(function() {

    $('#somecheck').change(function() { dosomething(); } );
});
</script>

For those new to jQuery you are basically waiting for the page to become fully loaded, then you are adding the event handler 'dosomething' to the input box.